Problems with the debugger Elements tab
IntelliJ IDEA 2021.2 (Ultimate Edition)
Build #IU-212.4746.92, built on July 27, 2021
If I click (single or double) in the Structure side of the Elements tab, it doesn't scroll the Text side to the corresponding element. It also doesn't select the element in the browser. However, clicking on the Text side does do both. Is there a way to activate these functions in the Structure tab?
Also, I can't seem to find a way to start with an element in the browser, and go from it to the corresponding location in either the Structure or Text tabs (like Chrome's right-click Inspect). Is there a way to do that?
Please sign in to leave a comment.
These are known issues, see https://youtrack.jetbrains.com/issue/WEB-21088 and https://youtrack.jetbrains.com/issue/WEB-8362
Note that Live Edit plugin this functionality is part of is not actively maintained, we plan to sunset it in favor of a new way to preview changes in the HTML files
The new way isn't sufficient, though. I'm not working with HTML files, I'm working with TSX files that result in HTML in the browser. And the HTML they produce often changes as a result of user actions.
What I need is a way to see the DOM as it exists right now in my browser, which is what the Structure and Text views provide. And with that, a way to point at an element in the browser and say "show me, in my debugger (i.e. the Structure/Text views), the DOM node for this element". The Chrome debugger's Elements tab provides this, and what I'm trying to do is to avoid having to open the Chrome debugger - I can already debug my Typescript code within IntelliJ and look at the console as well, so inspecting the DOM inside it is a natural extension of that.