Użyj panelu Elementy , aby sprawdzić i edytować elementy DOM.
Przegląd
Panel Elementy zapewnia rozbudowany interfejs do sprawdzania i manipulowania DOM. 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 ma też te karty, które zawierają odpowiednie narzędzia:
Style:
- Wyświetlaj i debuguj reguły CSS zastosowane do elementu ze wszystkich arkuszy stylów.
- Znajdź nieprawidłowe, zastąpione, nieaktywne lub inne reguły CSS, które nie działają zgodnie z oczekiwaniami.
- Edytuj elementy, dodając deklarację, stosując klasę i korzystając z modelu pudełkowego.
- Uzyskaj dostęp do opcji edycji kontenera za pomocą plakietek w drzewie DOM.
Wynikowy: wyświetla rozwiązane właściwości zastosowane do elementu podczas renderowania go przez Chrome.
Układ: zawiera opcje modyfikowania nakładek siatki i flexbox.
Detektory zdarzeń: wyświetla wszystkie detektory zdarzeń i ich atrybuty. Umożliwia znalezienie źródła detektorów zdarzeń i filtrowanie detektorów pasywnych lub blokujących.
Punkty przerwania DOM: wyświetla punkty przerwania zmian DOM dodane w panelu Elementy oraz umożliwia ich włączanie, wyłączanie, usuwanie i pokazywanie.
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: wyświetla elementy, które mają etykiety ARIA, i ich właściwości. Umożliwia przełączanie i sprawdzanie drzewa ułatwień dostępu na stronie.
Otwieranie panelu Elementy
Domyślnie po otwarciu Narzędzi deweloperskich otwiera 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 wpisywać
Elements, wybierz Show Elements (Pokaż elementy) i naciśnij Enter. Narzędzia deweloperskie wyświetlą panel Elementy w panelu bocznym u dołu okna Narzędzi deweloperskich.