Debug Tool Window: Elements Tab
In this tab, view the HTML source code that implements the active browser page and its HTML DOM structure. Any changes made to the page through the browser are immediately reflected in the tab.
To Have the Tab Displayed:
Install the JetBrains Chrome extension in your Chrome browser, see Installing JetBrains Chrome extension.
Install and enable the LiveEdit plugin as described in Managing Plugins.
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 th 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, PhpStorm 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, PhpStorm highlights the corresponding element in the browser.