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

Sofia Emelianova
Sofia Emelianova
GitHub

Na karcie Elementy > 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:

  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 otwarty na kartę Właściwości

Własne właściwości miejsca

Karta Właściwości sortuje i wyświetla własne właściwości obiektu jako pierwsze i pogrubione.

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żoną [[Prototype]] itd.

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

W tym przykładzie możesz sprawdzić, skąd pochodzi dziedziczona właściwość size, znajdując w łańcuchu prototypów oryginalną właściwość własną (pogrubioną) wraz z odpowiednim getterem.

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 specyficzne dla prototypu.

Filtruj usługi

Aby szybko znaleźć daną właściwość, zacznij wpisywać jej nazwę lub wartość w polu wejściowym Filtr.

Filtr

Pokaż wszystkie właściwości

Domyślnie karta Właściwości nie zawiera właściwości z wartościami null i undefined.

Aby zobaczyć wszystkie właściwości, zaznacz pole 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 z możliwością zwijania () to obiekty {} lub tablice []. Właściwości, które można zwijać.

Więcej informacji o przeglądaniu obiektów JavaScript znajdziesz w artykule Przeglądanie 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 linki. Kliknij link, aby wybrać odpowiedni węzeł w drzewie DOM. Link do węzła DOM w główce.

Własne i odziedziczone właściwości

Właściwości wyróżnione pogrubioną czcionką są właściwościami 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. DevTools sortuje własne właściwości na pierwszym miejscu, aby ułatwić ich znalezienie.

Właściwości zliczalne i niewyliczalne

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

Metody

Metody są oznaczone symbolem f (). Metoda.

Więcej informacji o funkcjach znajdziesz w instrukcji inspekcji funkcji w Konsoli.