Aby sprawdzać i edytować elementy DOM, użyj panelu Elementy.
Omówienie
Panel Elementy zawiera zaawansowany interfejs do sprawdzania DOM-u i modyfikowania jego zawartości. Korzystając z drzewa DOM, które przypomina dokument HTML, możesz wybierać 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 elementy kodu CSS, które nie działają zgodnie z oczekiwaniami.
- Edytuj elementy, dodając deklarację, zastosowując klasę i działając w ramach modelu pudełka.
- Uzyskaj dostęp do opcji edycji kontenera za pomocą plakietek znajdujących się w drzewie DOM.
Wynikowy: lista rozstrzygniętych właściwości zastosowanych do elementu w postaci, w której są one renderowane przez Chrome.
Detektory zdarzeń: lista wszystkich detektorów zdarzeń i ich atrybutów. Umożliwia znalezienie źródła detektorów zdarzeń i wybranie detektorów pasywnych lub blokujących.
Punkty przerwania DOM: zawiera listę punktów zmiany w DOM dodanych z panelu Elementy. Umożliwia ich włączanie, wyłączanie, usuwanie i wyświetlanie.
Właściwości: wybierz węzeł DOM, aby sprawdzić i posortować własne i odziedziczone 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 przeglądanie drzewa ułatwień dostępu (funkcja eksperymentalna).
Otwórz panel Elementy
Domyślnie po otwarciu Narzędzi deweloperskich otworzy się panel Elementy. Możesz też zbadać 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 Polecenia, naciskając:
- macOS: Command + Shift + P.
- Windows, Linux, ChromeOS: Control + Shift + P
- Zacznij pisać
Elements, wybierz Pokaż elementy i naciśnij Enter. Narzędzie DevTools wyświetla panel Elementy w schowku u dołu okna.