Viewing Actual HTML DOM
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
- 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 WebStorm. For details, see Using JetBrains Chrome Extension and http://confluence.jetbrains.com/display/WI/How+to+install+Chrome+extension.
- Make sure the LiveEdit plugin is enabled. The plugin is bundled with WebStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.
Viewing the HTML source and DOM structure of the actual page
- 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.