PyCharm 2017.1 Help

Viewing Actual HTML DOM

This feature is supported in the Professional edition only.

On this page:


Besides Live Editing, that is, monitoring how the changes you make in an HTML file are rendered in the actual browser window, during a debugging session you can perform a reverse operation using the Elements tab of the Debug tool window. The tab shows the HTML source code that implements the actual browser page and its HTML DOM structure. Moreover, any changes made to the page through the browser are immediately reflected in the Elements tab.

Before you start

  1. Make sure you are using the Chrome browser for debugging.
  2. Make sure the JetBrains Chrome Extension is installed in your Chrome browser, see Installing JetBrains Chrome extension.
  3. Make sure the LiveEdit repository plugin is installed and enabled. The plugin is not bundled with PyCharm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

Viewing the HTML source and DOM structure

To view the HTML source and DOM structure of the actual page

  1. To initiate a debugging session, create a run configuration of the type JavaScript Debug and click the Debug button /help/img/idea/2017.1/debug.png on the toolbar. PyCharm establishes connection with the JetBrains Chrome extension and starts a debugging session.
  2. Switch to the Debug tool window and open the Elements tab. The tab consists of three panes, all the panes 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.

    The Scripts pane shows a tree of executed scripts.

    The Structure and 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. PyCharm highlights the element in the browser as soon as you click the corresponding node in the DOM structure or in the Text pane.

See Also

Last modified: 26 July 2017