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:
- Make sure you are using the Chrome browser for debugging.
Make sure the JetBrains Chrome Extension is installed in your Chrome browser.
The extension is installed when you first initiate a debugging session and follow the dedicated link provided by PhpStorm. For details, see Using JetBrains Chrome Extension and http://confluence.jetbrains.com/display/WI/How+to+install+Chrome+extension.
- Make sure the LiveEdit repository plugin is installed and enabled. The plugin is not bundled with PhpStorm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
The Structure, Text, and Scripts Panes
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.