Użyj panelu Elementy, aby sprawdzić i edytować elementy DOM.
Przegląd
Panel Elementy zapewnia zaawansowany interfejs do sprawdzania i manipulowania DOM. Możesz użyć widoku drzewa DOM, który przypomina dokument HTML, aby wybrać konkretne węzły DOM i zmodyfikować 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 style CSS, które nie działają zgodnie z zamierzeniami.
- Edytuj elementy, dodając deklarację, stosując klasę i korzystając z modelu pudełkowego.
- Dostęp do opcji edycji kontenera uzyskasz za pomocą odznak w drzewie DOM.
Wynikowy: zawiera listę rozwiązanych właściwości zastosowanych do elementu w sposób, w jaki są renderowane przez Chrome.
Układ: zawiera opcje modyfikowania nakładek siatki i flexbox.
Detektory zdarzeń: lista wszystkich detektorów zdarzeń i ich atrybutów. Umożliwia znalezienie źródła detektorów zdarzeń i filtrowanie detektorów pasywnych lub blokujących.
Punkty przerwania DOM: lista punktów przerwania zmian DOM dodanych w panelu Elementy. Możesz je włączać, wyłączać, usuwać i wyświetlać.
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: lista elementów z etykietami ARIA i ich właściwościami. Umożliwia przełączanie i sprawdzanie drzewa ułatwień dostępu (eksperymentalne).
Otwórz panel 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: Ctrl+Shift+P
- Zacznij wpisywać
Elements, wybierz Pokaż elementy i naciśnij Enter. Narzędzia deweloperskie wyświetlają panel Elementy w panelu bocznym u dołu okna narzędzi.