Avatar for Username

Przeszukaj pomoc

Unikaj oszustw związanych z pomocą.Nigdy nie będziemy prosić Cię o dzwonienie na numer telefonu, wysyłanie SMS-ów ani o udostępnianie danych osobowych. Zgłoś podejrzaną aktywność, korzystając z opcji „Zgłoś nadużycie”.

Więcej informacji

Wątek został zarchiwizowany. Jeśli potrzebujesz pomocy, zadaj nowe pytanie.

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

  • 6 odpowiedzi
  • 1 osoba ma ten problem
  • 1 wyświetlenie
  • Ostatnia odpowiedź od jhnlmn

jhnlmn
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

Wybrane rozwiązanie

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

Przeczytaj tę odpowiedź w całym kontekście 👍 1

Wszystkie odpowiedzi (6)

Shashank Shekhar
Shashank Shekhar
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.

jhnlmn
jhnlmn Zadający pytanie
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

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
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.

jhnlmn
jhnlmn Zadający pytanie
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

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

Wybrane rozwiązanie

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

jhnlmn
jhnlmn Zadający pytanie
more options

Perfect Thank you very much