Elements tab
Last modified: 09 June 2021This tab shows the actual HTML source code and the HTML DOM structure of the active browser page. Use the tab to monitor the changes made to the page through the browser.
To Have the Tab Displayed:
Install the LiveEdit plugin on the Settings/Preferences | Plugins page, tab Marketplace, as described in Installing plugins from JetBrains repository.
Activate the Live Edit functionality by selecting the Update application in Chrome on changes in checkbox on the Live Edit page. For details, see Live Edit in HTML, CSS, and JavaScript.
The Structure, Text, and Scripts Panes
The tab consists of three panes: Structure, Text, and Scripts.
The Structure pane shows the HTML DOM structure of the page that is currently active in the browser. The structure is updated dynamically according to the changes made on the page.
The Text pane shows HTML source code of the page that is currently active in the browser. The code is updated dynamically according to the changes made on the page.
The Scripts pane shows a tree of executed scripts.
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.
Thanks for your feedback!