查看实际的 HTML DOM
在调试客户端代码时，调试工具窗口的元素选项卡会显示实现实际浏览器页面及其HTML DOM 结构的 HTML 源代码。
通过浏览器或编辑器对页面所做的任何更改也会立即反映在“元素”选项卡中。
目前，此功能仅支持Google Chrome并且仅在调试会话期间。
在你开始前
确保在Settings/Preferences |上启用了JavaScript 和 TypeScript以及JavaScript 调试器所需的插件。插件页面，选项卡Installed，有关详细信息，请参阅管理插件。
在Settings/Preferences |上安装并启用LiveEdit插件 插件页面，选项卡Marketplace，如从 JetBrains 存储库安装插件中所述。
如配置 JavaScript 调试器中所述配置内置调试器。
要使您对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中而不重新加载页面，请激活实时编辑功能。有关详细信息，请参阅HTML、CSS 和 JavaScript中的实时编辑。
从HTML、CSS 和 JavaScript 中的实时编辑了解更多信息。
查看实际页面的 HTML 源码和 DOM 结构
要启动调试会话，请创建JavaScript 调试类型的运行配置并单击
工具栏上的 。切换到调试工具窗口并打开元素选项卡。该选项卡由两个只读窗格组成。
文本窗格显示当前在浏览器中打开的页面的 HTML 源代码。只要在浏览器中对页面进行任何更改（例如单击图标），窗格中的代码就会相应更新。
Structure窗格在Text窗格中显示 HTML 代码的DOM 结构。
结构和文本窗格相互同步。当您单击 DOM 结构中的节点时，PhpStorm 会滚动浏览Text窗格的内容。窗格也与浏览器同步：只要单击 DOM 结构或文本窗格中的节点，PhpStorm 就会突出显示浏览器中的相应元素。
要查看已执行脚本的树，请打开“脚本”选项卡。