Firefox 11 dodał dwa nowe narzędzia programistów internetowych do już imponującego arsenału Firefoksa. Funkcja Tilt wizualizuje struktury stron w 3D, natomiast Edytor stylów może edytować arkusze stylów CSS w locie.
Funkcja 3D, znana jako Tilt, to sposób wizualizacji DOM strony. Integruje się z istniejącym Inspektorem Dokumentów i używa WebGL do wyświetlania bogatej grafiki 3D w przeglądarce.
Dostęp do Tilt możesz uzyskać z poziomu Inspektora stron Firefoksa. Aby rozpocząć, otwórz Inspektora stron, wybierając "Sprawdź" w menu Deweloper sieci. Możesz także kliknąć prawym przyciskiem myszy na bieżącej stronie i wybrać "Sprawdź element", aby uruchomić inspektora w określonym elemencie.
Kliknij przycisk "3D" na pasku narzędzi inspektora.
Po aktywowaniu trybu 3D zobaczysz strukturę strony, ale będzie ona wyglądać płasko, dopóki jej nie obrócisz.
Obróć model, klikając lewym przyciskiem myszy, przesuń obraz po kliknięciu prawym przyciskiem myszy, a powiększ i pomniejsz za pomocą kółka myszy.
Ten widok jest zintegrowany z innymi narzędziami inspektora. Jeśli masz otwarte panele HTML lub Style, możesz kliknąć element na stronie hej, aby wyświetlić kod HTML tego elementu lub jego właściwości CSS.
Funkcja wizualizacji 3D opierała się na rozszerzeniu Tilt, ale nie posiada wszystkich funkcji rozszerzenia Tilt. Jeśli chcesz dostosować kolory lub nawet wyeksportować wizualizację jako plik modelu 3D do użytku z programem do edycji 3D, musisz zainstalować dodatek Tilt 3D. Kiedy już to zrobisz, dostaniesz nową opcję "Tilt" w menu dla programistów internetowych.
Kliknij przycisk Anuluj, aby użyć starej wersji Tilt, gdy zostaniesz o to poproszony.
Znajdziesz opcje kontroli dostosowywania wizualizacji po lewej stronie okna i inne opcje, w tym funkcję eksportu, u góry strony.
Aby wyświetlić i edytować arkusze stylów CSS strony, otwórz Edytor stylów z menu Web Developer.
Edytor stylów wyświetla arkusze stylów na bieżącej stronie. Włącz lub wyłącz arkusz stylów, klikając ikonę oka po lewej stronie nazwy arkusza stylów. Edytuj arkusz stylów, zaznaczając go i modyfikując kod.
Zmiany są natychmiast odzwierciedlane na stronie. Jeśli wyłączysz arkusz stylów, strona utraci informacje o stylu. Jeśli edytujesz arkusz stylów, zmiany będą widoczne na stronie podczas pisania.
Możesz zapisać kopię jednego z arkuszy stylów na swoim komputerze, zaimportować istniejący arkusz stylów z komputera lub dodać nowy, pusty arkusz stylów za pomocą linków Zapisz, Importuj lub Nowy w oknie Edytor stylów.
Funkcja wizualizacji 3D obserwuje zmiany na bieżącej stronie i powiadomienia o wystąpieniu zmian. Gdy używasz Edytora stylów z otwartym inspektorem 3D, twoje zmiany zostaną natychmiast odzwierciedlone w widoku 3D. Działa to również z rozszerzeniami firm zewnętrznych, które modyfikują strony internetowe, takie jak Firebug.
