View actual HTML DOM

Make sure the JavaScript and TypeScript bundled plugin is enabled in the settings. Press Ctrl+Alt+S to open the IDE settings and select Plugins. Click the Installed tab. In the search field, type JavaScript and TypeScript. For more details about plugins, see Managing plugins.

Make sure the JavaScript Debugger bundled plugin is enabled in the settings. Press Ctrl+Alt+S to open the IDE settings and select Plugins. Click the Installed tab. In the search field, type JavaScript Debugger. For more details about plugins, see Managing plugins.

Install and enable the LiveEdit plugin on the Settings | Plugins page, tab Marketplace, as described in Installing plugins from JetBrains repository.

Configure the built-in debugger as described in Configuring JavaScript debugger.

To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. For more details about the live editing functionality, see Live Edit in HTML, CSS, and JavaScript.

To start a debugging session, create a run configuration of the type JavaScript Debug and click the Debug button () on the toolbar.

Switch to the Debug tool window and open the Elements tab. The tab consists of two read-only panes.

• 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.

The Structure and the Text panes are mutually synchronized. When you click a node in the DOM structure, PyCharm scrolls through the contents of the Text pane. The panes are also synchronized with the browser: as soon as you click a node in the DOM structure or in the Text pane, PyCharm highlights the corresponding element in the browser.

To view a tree of executed scripts, open the Scripts tab.