Wyświetlanie właściwości obiektów DOM

Sofia Emelianova
Sofia Emelianova

Użyj menu Elementy > Na karcie Właściwości możesz przeglądać i filtrować właściwości obiektów DOM.

Otwórz kartę Właściwości.

Aby otworzyć kartę Właściwości, wykonaj te czynności:

  1. Otwórz Narzędzia deweloperskie. Domyślnie otworzy się panel Elementy.
  2. W drzewie DOM wybierz węzeł.
  3. Otwórz kartę Właściwości. Jeśli nie widzisz tej karty, kliknij Więcej  i wybierz ją z menu.

Panel Elementy z otwartą kartą Właściwości

Własne właściwości Spota

Na karcie Właściwości najpierw sortowane są własne właściwości obiektu, a czcionka jest pogrubiona.

ALT_TEXT_HERE

Znajdowanie pochodzenia dziedziczonej właściwości

Karta Właściwości ocenia metody dostępu w wbudowanych elementach i wyświetla je w obiekcie jako odziedziczone i w zwykłym kroju pisma.

Aby znaleźć pochodzenie odziedzonej właściwości, rozwiń obiekt, a potem jego [[Prototype]], a potem zagnieżdżony [[Prototype]] itd.

Śledzenie właściwości size do jej metody getter w łańcuchu prototypów.

W tym przykładzie możesz sprawdzić, skąd pochodzi odziedziczona właściwość size, znajdując własną (pogrubioną) właściwość w łańcuchu prototypu razem z odpowiednią metodą getter.

Dodatkowo właściwości specyficzne dla prototypów są wyświetlane tylko w prototypach, a nie w obiektach. Ułatwia to diagnozowanie obiektów.

Właściwości charakterystyczne dla prototypu.

Filtruj usługi

Aby szybko znaleźć właściwość, zacznij wpisywać jej nazwę lub wartość w polu do wprowadzania danych Filtr.

Filtr

Pokaż wszystkie właściwości

Domyślnie na karcie Właściwości nie wyświetlają się właściwości z wartościami null i undefined.

Aby wyświetlić wszystkie właściwości, zaznacz Pokaż wszystkie.

Właściwości z wartościami null.

Właściwości

Na karcie Elementy > Właściwości znajdziesz różne właściwości.

Właściwości proste

Proste właściwości to pary wartości <name>: <value>. Proste właściwości.

Obiekty i tablice

Właściwości zwijane () to obiekty {} i tablice []. Właściwości zwijane.

Więcej informacji o sprawdzaniu obiektów JavaScript znajdziesz w artykule Sprawdzanie właściwości obiektów.

Właściwości odpowiadające węzłom DOM

Właściwości odpowiadające węzłom DOM to połączenia. Kliknij link, aby wybrać odpowiedni węzeł w drzewie DOM. Link do węzła DOM w główce.

Usługi własne i dziedziczone

Właściwości wyróżnione pogrubioną czcionką należą do obiektu. Są one definiowane bezpośrednio na obiekcie.

Właściwości w zwykłym czcionce są dziedziczone z łańcucha prototypów. Aby je wyświetlić, DevTools ocenia odpowiednie metody dostępu w wbudowanych elementach HTML. Własne i odziedziczone właściwości. Narzędzia deweloperskie najpierw sortują własne właściwości, aby ułatwić ich rozpoznanie.

Właściwości wyliczalne i niewyliczalne

Właściwości zliczalne mają jasny kolor. Właściwości niewyliczalne są wyciszone. Właściwości wymienne i niewyliczalne. Możesz przetwarzać właściwości zliczalne za pomocą pętli for … in lub metody Object.keys().

Metody

Metody są oznaczone ikoną f (). Metoda.

Więcej informacji o funkcjach znajdziesz w artykule Sprawdzanie funkcji za pomocą Konsoli.