MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Przewodnik przez UI

Ten artykuł jest szybkim wprowadzeniem do głównych sekcji Interfejsu Użytkownika (UI) Inspektora Stron.

Obejmuje on trzy komponenty najwyższego poziomu UI Inspektora:

  • przycisk "Zaznacz element"
  • sekcja HTML (na obrazku: HTML pane)
  • sekcja CSS (na obrazku: CSS pane)

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.

Przycisk "Zaznacz element"

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.

Sekcja HTML

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.

Sekcja CSS

Prawa część Inspektora to sekcja CSS (na obrazku: CSS pane):

Sekcja CSS jest podzielona 5 perspektyw:

  • Widok Reguł (Rules)
  • Widok Wyliczony (Computed)
  • Widok Czcionek (Fonts)
  • Widok Modelu Pudełkowego (Box Model)
  • Widok Animacji (Animations)

Użyj zakładek w górnej części sekcji CSS, aby przełączać się pomiędzy różnymi widokami.

Widok Reguł

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

Widok Wyliczony pokazuje całe wyliczone CSS dla zaznaczonego elementu.

Zobacz Badaj i edytuj CSS dla dalszych szczegółów.

Widok Czcionek

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

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

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.

Pokaż/ukryj sekcję CSS

Począwszy od Firefoksa 40 w pasku narzędzi istnieje przycisk, za pomocą którego możesz pokazać lub ukryć sekcję CSS:

Autorzy i etykiety dokumentu

 Autorzy tej strony: kubutekf
 Ostatnia aktualizacja: kubutekf,