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:

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

Perfect Thank you very much