Viewing DOM Elements as Objects in Chrome debugger

Question

Is it possible using Chrome's debugger (or another debugging tool) to view DOM Elements as objects?

That is, if I create a regular object in Chrome's console, I'm able to inspect its elements.

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

However, if I create a new DOM element, the debugger displays its HTML contents.

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

I'd like to view the variable p as an object. Instead of seeing <p></p>, I'd like to see it's properties (as you do when looking at o above)

Is this possible in the debugger?

Answer 1

Maybe console.dir() is what you are after.

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

Image below is from Google Chrome Console Tools docs