WebStorm Help

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:

  1. Make sure you are using the Chrome browser for debugging.
  2. 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.

  3. Make sure the LiveEdit plugin is enabled. The plugin is bundled with WebStorm and activated by default. If not, enable it on the Plugins page of the Settings dialog box as described in Enabling and Disabling 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 Text panes are mutually synchronized. When you click a node in the DOM structure, WebStorm scrolls through the contents of the Text pane.

The panes are also synchronized with the browser. WebStorm highlights the element in the browser as soon as you click the corresponding node in the DOM structure or in the Text pane.

See Also

Last modified: 22 May 2015