javascript - Viewing DOM Elements as Objects in Chrome debugger - Stack Overflow

admin管理员组

文章数量:1245031

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?

• javascript
• google-chrome
• dom

Share Improve this question Follow asked Oct 30, 2012 at 18:13 Alana StormAlana Storm 166k9595 gold badges417417 silver badges618618 bronze badges 1

• 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

本文标签： javascriptViewing DOM Elements as Objects in Chrome debuggerStack Overflow