Mozilla VPN is currently experiencing an outage. Our team is actively working to resolve the issue. Please check the status page for real-time updates. Thank you for your patience.

为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

How to view HTML DOM property when selecting elements in Inspector?

  • 6 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 jhnlmn

more options

Hi When I open Inspector from Firefox Developer Tools and select an HTML node, inspector shows numerous CSS related items for that node (like Rules, Layout, Computed, etc), but it does not show basic HTML DOM properties. In particular, I need to see innerText property for the currently selected node (and then walk through HTML tree watching innerText for every node). I found that I can do Right Click, Show DOM properties and than it prints all properties to the Web Console window, but this is not convenient: I have to repeat this Right Click thing for every element and search for innerText every time. This will take forever. So, question: is it possible to somehow show innerText for the current node automatically (like those CSS items are shown)? Thank you

Hi When I open Inspector from Firefox Developer Tools and select an HTML node, inspector shows numerous CSS related items for that node (like Rules, Layout, Computed, etc), but it does not show basic HTML DOM properties. In particular, I need to see innerText property for the currently selected node (and then walk through HTML tree watching innerText for every node). I found that I can do Right Click, Show DOM properties and than it prints all properties to the Web Console window, but this is not convenient: I have to repeat this Right Click thing for every element and search for innerText every time. This will take forever. So, question: is it possible to somehow show innerText for the current node automatically (like those CSS items are shown)? Thank you

被采纳的解决方案

I gave up on the approach of giving dev tools an object and threw the DOM property values into an HTML page. Currently, it doesn't have any conveniences related to collapsing, but hopefully the full content is there. New download:

https://www.jeffersonscher.com/temp/devtools-text_v0.2.zip

定位到答案原位置 👍 1

所有回复 (6)

more options

Hi jhnlmn, glad to see you in Mozilla Support Forum.

You can try this:-

Enabling the DOM Property Viewer

The DOM Property Viewer is not enabled by default. To enable it, open the developer tool settings and check the "DOM" box under "Default Firefox Developer Tools".

Opening the DOM Property Viewer

Once enabled, you can open the DOM Property Viewer by selecting "DOM" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its Ctrl + Shift + W keyboard shortcut.

The Toolbox will appear at the bottom of the browser window, with the DOM Property Viewer activated. It's just called "DOM" in the Toolbox.

Reference:- Article

If it doesn't solved your problem, feel free to ask in Reply Section. Thanks for raising your question in Mozilla Support Forum.

more options

Thank you for your reply. I already had DOM Property Viewer enabled, but I cannot figure out what it is good for. DOM Property Viewer displays properties of the window object, but I need to display properties of the object, which is selected in Inspector and I need these properties to be updated as I walk through the inspector tree, just like CSS properties are updated in Rules/Layout/Computed windows. Is it possible? (I know that I can walk through the window/document/children tree in DOM window, but is it not as easy as walking through the inspector tree). Thank you

more options

Hmm, I tried to create an add-on for this, but I get something that looks like JSON.stringify() output, so it's not attractive for multi-line text nodes (and pink text is a bit hard on the eyes). You could try it out using the about:debugging page to load the extension temporarily and see what you think:

Not sure of the best way to proceed because most things I've tried to work around that simply fail or make it worse.

more options

Thank you, almost there.

There is one limitation of your method: if text is too large, then it is shortened and "..." is displayed at the end. When I use 'Right Click, Show DOM properties' it prints the same pink text with the same formatting as your code and it is also shortened with "...", but it has a small triangle that allows me to expand the text and see the whole text, but this trick does not work with your pane. I wonder whether it is possible to do similar thing - print text to Web Console. I tried to use console.log, but nothing comes out. Do you know how 'Right Click, Show DOM properties' works?

Thank you

more options

选择的解决方案

I gave up on the approach of giving dev tools an object and threw the DOM property values into an HTML page. Currently, it doesn't have any conveniences related to collapsing, but hopefully the full content is there. New download:

https://www.jeffersonscher.com/temp/devtools-text_v0.2.zip

more options

Perfect Thank you very much