W panelu Elementy możesz sprawdzać i edytować elementy DOM.
Przegląd
Panel Elementy ma rozbudowany interfejs do badania DOM i modyfikowania go. Możesz użyć drzewa DOM, które przypomina dokument HTML, aby wybrać konkretne węzły DOM i modyfikować je za pomocą innych narzędzi.
Panel Elementy zawiera też te karty z odpowiednimi narzędziami:
Style:
- Wyświetlanie i debugowanie reguł CSS zastosowanych do elementu ze wszystkich arkuszy stylów.
- Znajdź nieprawidłowe, zastąpione, nieaktywne lub inne usługi porównywania cen, które nie działają poprawnie.
- Edytuj elementy, dodając deklarację, stosując klasę i wchodząc w interakcję z modelem Box.
- Uzyskaj dostęp do opcji edycji kontenera za pomocą plakietek dostępnych w drzewie DOM.
Obliczone: zawiera listę zatwierdzonych właściwości zastosowanych do elementu w momencie ich renderowania przez Chrome.
Układ: zawiera opcje modyfikowania nakładek siatki i flexbox.
Detektory zdarzeń: zawiera listę wszystkich detektorów zdarzeń i ich atrybutów. Pozwala znaleźć źródło detektorów zdarzeń i filtrować pod kątem biernych lub blokujących detektory.
Punkty przerwania DOM: zawiera listę punktów przerwania zmian DOM dodanych z panelu Elementy i umożliwia ich włączanie, wyłączanie, usuwanie i ujawnianie.
Właściwości: wybierz węzeł DOM, aby sprawdzić i posortować własne i dziedziczone właściwości obiektu.
Ułatwienia dostępu: zawiera listę elementów z etykietami ARIA i ich właściwościami. Umożliwia przełączanie i sprawdzanie drzewa ułatwień dostępu (funkcja eksperymentalna).
Otwórz panel Elementy
Domyślnie po otwarciu Narzędzi deweloperskich wyświetla się panel Elementy. Możesz też sprawdzić węzeł w dowolnym miejscu na stronie, aby automatycznie otworzyć panel Elementy.
Aby ręcznie otworzyć panel Elementy:
- Otwórz Narzędzia deweloperskie.
- Otwórz menu poleceń, naciskając:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Zacznij pisać
Elements, wybierz Pokaż elementy i naciśnij Enter. Narzędzia deweloperskie wyświetlają panel Elementy w panelu u dołu okna Narzędzi deweloperskich.