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:
- Otwórz Narzędzia deweloperskie. Domyślnie otworzy się panel Elementy.
- W drzewie DOM wybierz węzeł.
- Otwórz kartę Właściwości. Jeśli nie widzisz tej karty, kliknij Więcej i wybierz ją z menu.
Własne właściwości miejsca
Na karcie Właściwości najpierw sortowane są własne właściwości obiektu, a czcionka jest pogrubiona.
Znajdowanie pochodzenia dziedziczonej właściwości
Karta Właściwości ocenia funkcje 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.
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.
Filtruj usługi
Aby szybko znaleźć daną właściwość, zacznij wpisywać jej nazwę lub wartość w polu wejściowym 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 pole Pokaż wszystkie.
Informacje o właściwościach
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>.
Obiekty i tablice
Właściwości zwijane () to obiekty {} i tablice [].
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 linki. Kliknij link, aby wybrać odpowiedni węzeł w drzewie DOM.
Własne i odziedziczone właściwości
Właściwości wyróżnione pogrubioną czcionką należą do obiektu. Są one zdefiniowane bezpośrednio w 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.
Narzędzia deweloperskie najpierw sortują własne właściwości, aby ułatwić ich rozpoznanie.
Właściwości zliczalne i niewyliczalne
Wymienne właściwości mają jasny kolor. Właściwości niewyliczalne są wyciszone.
Możesz iterować po właściwościach zliczalnych za pomocą pętli for … in lub metody Object.keys().
Metody
Metody są oznaczone symbolem f ().
Więcej informacji o funkcjach znajdziesz w artykule Sprawdzanie funkcji w Konsoli.