Firefox 11 dodał dwa nowe narzędzia dla programistów WWW do Już imponujący arsenał Firefoksa . Funkcja Tilt wizualizuje struktury witryny w 3D, a Edytor stylów może edytować arkusze stylów CSS w locie.
Funkcja 3D, znana jako Tilt, to sposób wizualizacji DOM witryny internetowej. Integruje się z istniejącym Inspektorem dokumentów i wykorzystuje WebGL do wyświetlania bogatej grafiki 3D w przeglądarce.
Tilt - wizualizacja witryny w 3D
Dostęp do Tilt można uzyskać z poziomu Inspektora stron Firefoksa. Aby rozpocząć, otwórz Inspektor stron, wybierając „Inspekcja” z menu programisty. Możesz także kliknąć prawym przyciskiem myszy na bieżącej stronie i wybrać „Sprawdź element”, aby uruchomić inspektora od określonego elementu.
Kliknij przycisk „3D” na pasku narzędzi inspektora.
Po aktywacji trybu 3D zobaczysz strukturę strony, ale będzie wyglądać płasko, dopóki jej nie obrócisz.
Obróć model, klikając lewym przyciskiem myszy, przesuwaj obraz, klikając prawym przyciskiem myszy, a także powiększaj i pomniejszaj za pomocą kółka myszy.
Ten widok jest zintegrowany z innymi narzędziami w Inspektorze. Jeśli masz otwarte panele HTML lub Styl, możesz kliknąć element na stronie hte, aby wyświetlić kod HTML lub właściwości CSS tego elementu.
Więcej funkcji 3D
Funkcja wizualizacji 3D została oparta na rozszerzeniu Tilt, ale nie ma wszystkich funkcji rozszerzenia Tilt. jeśli chcesz dostosować kolory lub nawet wyeksportować wizualizację jako plik modelu 3D do użytku w programie do edycji 3D, musisz zainstalować Dodatek Tilt 3D . Gdy już to zrobisz, w menu Web Developer pojawi się nowa opcja „Pochyl”.
Po wyświetleniu monitu kliknij przycisk Anuluj, aby użyć starej wersji Tilt.
W lewej części okna znajdują się elementy sterujące do dostosowania wizualizacji, a u góry strony inne opcje, w tym funkcja eksportu.
Edytor stylów CSS
Aby przeglądać i edytować arkusze stylów CSS strony, otwórz Edytor stylów z menu Web Developer.
Edytor stylów wyświetla listę arkuszy 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 pojawią się na stronie podczas pisania.
Możesz zapisać kopię jednego z arkuszy stylów na komputerze, zaimportować istniejący arkusz stylów z komputera lub dodać nowy, pusty arkusz stylów za pomocą łączy Zapisz, Importuj lub Nowy w oknie Edytor stylów.
Funkcja wizualizacji 3D śledzi zmiany na bieżącej stronie i powiadamia o ich wystąpieniu. Gdy używasz Edytora stylów z otwartym Inspektorem 3D, zmiany zostaną natychmiast odzwierciedlone w widoku 3D. Działa to również z rozszerzeniami innych firm, które modyfikują strony internetowe, takimi jak Firebug.
