Ten przewodnik jest celowo tak krótki, jak to możliwe. Odnosi się on do różnych innych przewodników How-To dla szczegółów, jak pracować z Inspektorem.Ten artykuł jest szybkim wprowadzeniem do głównych sekcji Interfejsu Użytkownika (UI) Inspektora Stron.
Obejmuje on trzy komponenty najwyższego poziomu UI Inspektora:
Ten przewodnik jest celowo tak krótki, jak to możliwe. Odnosi się on do różnych innych przewodników How-To dla szczegółów, jak pracować z Inspektorem.
Inspektor podaje Ci dokładne informacje o aktualnie zaznaczonym elemencie. Przycisk "Zaznacz element" jest jedną z możliwości, które pozwalają zaznaczyć element do sprawdzenia:
Pamiętaj, że jest to część tzw. main toolbox toolbar, więc przycisk ten jest dostępny z dowolnego narzędzia, nie tylko z Inspektora.
Aby dowiedzieć się, jak zaznaczyć element, zobacz przewodnik o zaznaczaniu elementu.
Inspektor jest podzielony na dwie części. Lewa część Inspektora to sekcja HTML (na obrazku: HTML pane)
Aby dowiedzieć się więcej o budowie sekcji HTML, zobacz przewodnik o badaniu i edytowaniu HTML.
Prawa część Inspektora to sekcja CSS (na obrazku: CSS pane):
Sekcja CSS jest podzielona 5 perspektyw:
Użyj zakładek w górnej części sekcji CSS, aby przełączać się pomiędzy różnymi widokami.
Widok Reguł wyświetla wszystkie reguły pasujące do zaznaczonego elementu, w kolejności od najbardziej do najmniej specyficznych:
Zobacz Badaj i edytuj CSS dla dalszych szczegółów.
Widok Wyliczony pokazuje całe wyliczone CSS dla zaznaczonego elementu.
Zobacz Badaj i edytuj CSS dla dalszych szczegółów.
Zaczynając od Firefoksa 47, widok Czcionek jest domyślnie wyłączony. Pracujemy nad bardziej funkcjonalnym zamiennikiem.
Na tą chwilę, jeśli chcesz zobaczyć widok Czcionek, odwiedź about:config, znajdź preferencję devtools.fontinspector.enabled i ustaw ją na true.
Widok Czcionek pokazuje wszystkie czcionki na stronie wraz z przykładami ich użycia, które można edytować.
Odwiedź stronę Zobacz Czcionki dla dalszych szczegółów.
Widok Modelu Pudełkowego pokazuje edytowalny widok modelu pudełkowego zaznaczonego elementu.
Zabacz Badaj i edytuj model pudełkowy dla dalszych szczegółów.
Widok Animacji pozwala zobaczyć szczegóły dowolnej animacji zastosowanej w zaznaczonym elemencie, oraz udostępnia kontroler do ich wstrzymania:
Zobacz Pracuj z animacjami dla dalszych szczegółów.
Począwszy od Firefoksa 40 w pasku narzędzi istnieje przycisk, za pomocą którego możesz pokazać lub ukryć sekcję CSS:
