Viewing Actual HTML DOM
During a debugging session, you can view the HTML source code that implements the actual browser page and its HTML DOM structure in the Elements tab of the Debug tool window. Moreover, any changes made to the page through the browser are immediately reflected in the Elements tab.
Currently this functionality is supported only for Google Chrome and only during a debugging session.
- Install the JetBrains Chrome Extension in your Chrome browser, see Installing JetBrains 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.
- Activate the Live Edit functionality by selecting the Update application in Chrome checkbox on the Live Edit page. For details, see Activating Live Edit.
- 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 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.