Tryb inspekcji: szybkie analizowanie właściwości elementów

Dale St. Marthe
Dale St. Marthe
LinkedIn

Aby wyświetlać i analizować konkretne elementy strony internetowej, użyj trybu inspekcji.

Przegląd

Aktywowanie trybu inspekcji (selektora) w Narzędziach deweloperskich umożliwia najeżdżanie kursorem na elementy na stronie i wyświetlanie informacji o stylu i ułatwieniach dostępu. Kliknięcie elementu przy włączonym trybie inspekcji podświetla odpowiedni element DOM w drzewie DOM panelu Elementy i wyświetla odpowiednie style na karcie Style.

Aktywuj tryb inspekcji

Aby włączyć tryb inspekcji:

  1. Otwórz DevTools.
  2. Na pasku działań kliknij przycisk Tryb inspekcji.

Przycisk trybu inspekcji na pasku działań.

Selektor jest aktywny, gdy ikona Trybu inspekcji jest niebieska.

Możesz też użyć skrótu w Chrome, aby otworzyć panel Elementy w trybie inspekcji. Naciśnij jedną z tych opcji:

  • macOS: Cmd+Option+C
  • Windows, Linux, ChromeOS: Ctrl+Shift+C

Używanie trybu inspekcji, aby wyświetlać informacje o stylu i ułatwieniach dostępu

Gdy tryb inspekcji jest aktywny, najedź kursorem na elementy na stronie. Spowoduje to ich podświetlenie i wyświetlenie nakładki. Panel Elementy automatycznie rozwija drzewo DOM, aby wyróżnić element, na który najeżdżasz kursorem.

Element na stronie głównej narzędzi deweloperskich wyróżniony z widoczną nakładką etykietki.

W zależności od elementu etykietka Tryb inspekcji będzie wyświetlać te właściwości stylu:

  • Selektory elementu.
  • Wymiary elementu w pikselach.
  • Kolor tła elementu.
  • Kolor tekstu elementu.
  • Właściwości czcionki tego elementu.
  • Dopełnienie elementu (w pikselach).
  • Margines elementu w pikselach.

Dodatkowo elementy, które korzystają z siatki CSS lub arkusza Flexbox CSS, będą miały inną ikonę obok nazwy.

Nakładka etykietki z ikoną Flex w lewym górnym rogu

Sekcja ułatwień dostępu etykietki zawiera te informacje:

  • Nazwa i rola elementu zgłoszonego technologii wspomagającej osoby z niepełnosprawnością.
  • Określa, czy w elemencie można zaznaczyć za pomocą klawiatury.

Najechanie kursorem na nagłówki tekstu powoduje wyświetlenie współczynnika kontrastu, który mierzy różnicę w jasności pierwszego planu (koloru tekstu) i koloru tła.

Etykietka zawiera współczynnik kontrastu nagłówka wynoszący 1,7.

Dobry współczynnik kontrastu jest kluczowy, aby tekst był czytelny. Dowiedz się, jak naprawić tekst o niskim kontraście.

Utrwalaj i ukrywaj etykietkę trybu inspekcji

Aby zachować etykietkę Tryb inspekcji bez możliwości przesuwania wskaźnika myszy w inne miejsce, naciśnij i przytrzymaj:

  • macOS: Ctrl + Opcja
  • Windows, Linux, ChromeOS: Ctrl+Alt

Aby tymczasowo ukryć etykietkę inspekcji, gdy przesuwasz wskaźnik myszy, naciśnij i przytrzymaj Ctrl.

Sprawdzanie niedostępnych elementów

Elementów z właściwością CSS pointer-events: none; nie można początkowo kierować w trybie inspekcji.

Element bezczynny niepodświetlony przez selektor.

Aby sprawdzić niedostępne elementy, najedź na nie kursorem, trzymając naciśnięty klawisz Shift.

Element bezczynny podświetlony przez selektor.