Can't find DOM inspector FF62
In FF62 when I inspect an element I cannot see any option to view the DOM of the element. I am trying to see whether the correct onclick handler has been defined for the element.
Chosen solution
Thank you. The "Show DOM Properties" option does show up when I right click on an element in the HTML pane of the inspector. I hope that someone who has greater familiarity with the current version of the tools will document this.
Read this answer in context 👍 0All Replies (10)
Usually right-click > Inspect Element will open the Page Inspector with the element selection. Are you able to get that far?
If there is a event handler defined on the current element, there should be an Event badge to the right of it. You also can check up the DOM tree (as an event would bubble) to see whether a relevant event is assigned there.
Ref. https://developer.mozilla.org/docs/Tools/Page_Inspector
jscher2000 said
Usually right-click > Inspect Element will open the Page Inspector with the element selection. Are you able to get that far? Yes I can inspect the element, but none of the displayed options seems to display the content of the DOM. I see the HTML, the CSS, and the layout, but there is no occurrence of the text "DOM" anywhere in the inspector. I have uploaded a screen capture where I have invoked inspect element for the "Clear" button. If there is a event handler defined on the current element, there should be an Event badge to the right of it. You also can check up the DOM tree (as an event would bubble) to see whether a relevant event is assigned there. I see the event badge, as you can see in the screenshot, but it does not identify which events are defined. For that I need to see the DOM. I cannot check up the DOM tree until I can get INTO the DOM tree. Ref. https://developer.mozilla.org/docs/Tools/Page_Inspector
This user interface seems to have created a situation where I ended up editing your response, rather than replying to the response.That seems sub-optimal to me.
Also I of course did not post this question until I had read all of the current documentation of the Inspector. However within that document the ONLY occurrence of the word DOM is as one of the keywords defined for the page. There is lots of information on the HTML and CSS panes, but there does not appear to be a DOM pane.
What are you looking for, exactly? Maybe it's what you get if you right-click a tag in the HTML tree and choose "Show DOM Properties".
With the dev tools docked at the bottom, that is hard to read. You can shift it to the right side, or undock it to a separate window, to make the display taller (see attached screenshot).
Chosen Solution
Thank you. The "Show DOM Properties" option does show up when I right click on an element in the HTML pane of the inspector. I hope that someone who has greater familiarity with the current version of the tools will document this.
jamescobban said
Thank you. The "Show DOM Properties" option does show up when I right click on an element in the HTML pane of the inspector. I hope that someone who has greater familiarity with the current version of the tools will document this.
There are already 18+ articles on the various features of the Page Inspector, so it's not surprising that features are hard to find if you don't think to look for them where the developers put them. MDN is editable if you think cross-references should be added in other places. Feel free to sign up and edit! Or you can mention it here:
The two links identified by cor-el are related to FF48 and do not appear to be entirely relevant to FF62. In particular this describes a "DOM property viewer" whereas the FF62 documentation references a "DOM Inspector". Between FF48 and FF62 the user interface for using the debugging tools has changed and the newer documentation does not make it clear exactly how you get from the "Inspect Element" tool to the associated DOM of the element that you are currently inspecting. I was looking for a "tab" that would display the DOM for the current element, but there is no such option in FF62. Instead I have learned that I have to re-select the element within the HTML pane with the mouse right button, at which point I am provided with the ability to see the DOM attributes. I do not find this two-step selection to be intuitively obvious, and therefore I feel that there is room for improving the documentation. Unfortunately I obviously do not have the experience to assist with that.
There are two different DOM items in the developer tools. One is in the right-click context menu in the left panel in the Page Inspector "View DOM Properties". This opens the currently selected element in the Web Console showing all properties of this element. The other is the DOM item that you can place on the toolbar of the developer tools via its settings page (F1). This shows the DOM properties of the current tab. The DOM Property Viewer article is about this DOM item that isn't present by default on the toolbar, but need to be added via the settings page (Default Developer Tools).