Jak korzystać z narzędzi programistycznych Firefoksa do przeglądania struktur stron w 3D
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.
Tilt - wizualizacja strony internetowej 3D
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 również 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 włączeniu 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 i 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 głównej, aby wyświetlić kod HTML tego elementu lub właściwości CSS.
Więcej funkcji 3D
Funkcja wizualizacji 3D opierała się na rozszerzeniu Tilt, ale nie posiada wszystkich funkcji rozszerzenia Tilt. Jeśli chcesz dostosować kolory lub wyeksportować wizualizację jako plik modelu 3D do użycia z programem do edycji 3D, musisz zainstalować dodatek Tilt 3D. Kiedy już to zrobisz, dostaniesz nową opcję "Tilt" w menu Developer WWW.
Kliknij przycisk Anuluj, aby użyć starej wersji Tilt, gdy zostaniesz o to poproszony.
Znajdziesz przyciski do dostosowywania wizualizacji po lewej stronie okna i inne opcje, w tym funkcję eksportu, u góry strony.
Edytor stylów CSS
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.
