Visualizzazione di elementi DOM come oggetti nel debugger di Chrome

Question

È possibile utilizzare il debugger di Chrome (o un altro strumento di debug) per visualizzare gli elementi DOM come oggetti?

Cioè, se creo un oggetto regolare nella console di Chrome, sono in grado di ispezionare i suoi elementi.

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

Tuttavia, se creo un nuovo elemento DOM, il debugger visualizza il contenuto HTML.

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

Mi piacerebbe vedere la variabile p come oggetto. Invece di vedere <p></p>, mi piacerebbe vedere le sue proprietà (come si fa guardando o sopra)

E 'possibile nel debugger?

Answer 1

Forse console.dir() è quello che stai cercando.

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

immagine qui sotto è da Google Chrome Console Tools docs