CODEWITHSUNDEEP
javascriptgoogle-chromedom
Alana Storm
Alana Storm

Reputation: 166066

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?

Upvotes: 12

Views: 6338

Answers (1)

epascarello
epascarello

Reputation: 207501

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

Showing console.dir

Upvotes: 15

Related Questions