How to view HTML DOM property when selecting elements in Inspector?
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
Read this answer in context 👍 1All Replies (6)
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.
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
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:
- https://www.jeffersonscher.com/temp/devtools-text.zip (unzip to a folder)
- https://developer.mozilla.org/docs/Tools/about:debugging#Loading_a_temporary_extension
Not sure of the best way to proceed because most things I've tried to work around that simply fail or make it worse.
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
الحل المُختار
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:
Perfect Thank you very much