Viewing Actual HTML DOM
During a debugging session, you can view the HTML source code that implements the actual browser page and its HTML DOM structure in the Elements tab of the Debug tool window. Moreover, any changes made to the page through the browser are immediately reflected in the Elements tab. To monitor also the changes you make in the editor, install the JetBrains Chrome extenstion and enable the Live Edit functionality as described in Live Edit in HTML, CSS, and JavaScript.
Currently this functionality is supported only for Google Chrome and only during a debugging session.
To view the HTML source and DOM structure of the actual page
To start a debugging session, create a run configuration of the type JavaScript Debug and click on the toolbar.
- Switch to the Debug tool window and open the Elements tab. The tab consists of two panes, both of them are read-only.
The Text pane shows the HTML source code of the page that is currently opened in the browser. As soon as any change is made to the page in the browser (e.g. clicking an icon), the code in the pane is updated accordingly.
The Structure pane shows the DOM structure of the HTML code in the Text pane.
To view a tree of executed scripts, open the Scripts tab.