Wyświetlanie elementów DOM jako obiektów w debugerze Chrome

Question

Czy jest możliwe użycie debuggera Chrome (lub innego narzędzia do debugowania) do wyświetlenia elementów DOM jako obiektów?

Oznacza to, że jeśli utworzę zwykły obiekt w konsoli Chrome, będę mógł sprawdzić jego elementy.

> o = {} 
    - Object 
    - __proto__ 
     - __defineGetter__ 
     - etc 

Jeśli jednak utworzę nowy element DOM, debugger wyświetli zawartość HTML.

> p = document.createElement('p') 
    <p></p> 

Chciałbym zobaczyć zmienną p jako obiekt. Zamiast widzieć <p></p>, chciałbym zobaczyć jego właściwości (tak jak to robisz patrząc na o powyżej)

Czy to możliwe w debugerze?

Answer 1

Być może console.dir() jest tym, czego szukasz. poniżej

> p = document.createElement('p') 
    <p></p> 
> console.dir(p) 
    - HTMLDivElement 
     align: "" 
     ... 

Obraz jest od Google Chrome Console Tools docs