javascript - Viewing DOM Elements as Objects in Chrome debugger

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?

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?

Share Improve this question asked Oct 30, 2012 at 18:13 Alana Storm 166k95 gold badges417 silver badges618 bronze badges

Does this answer your question? How do I view the properties of a DOM object in Chrome Developer? – ggorlen Commented Jul 19, 2022 at 17:43

Add a ment |

1 Answer 1

Sorted by: Reset to default 15

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