查看实际的 HTML DOM

请确保 JavaScript Debugger 和 Live Edit 所需插件在 设置 | 插件 页的 已安装 选项卡中已启用。 如需了解详情，请参阅 插件管理。

请按照 配置 JavaScript 调试器 中的说明配置内置调试器。

为了在不重新加载页面的情况下立即在浏览器中显示对 HTML、CSS 或 JavaScript 代码所做的更改，请启用 Live Edit 功能。 有关实时编辑功能的更多信息，请参阅 在 HTML、CSS 和 JavaScript 中进行 Live Edit。

要开始调试会话，请创建一个 JavaScript Debug 类型的运行配置，然后点击工具栏上的 调试 按钮（）。

切换到 调试 工具窗口并打开 元素 选项卡。 该选项卡由两个只读面板组成。

• 文本 面板显示当前在浏览器中打开页面的 HTML 源代码。 一旦在浏览器中对页面进行更改（例如点击图标），面板中的代码也将相应更新。

• 结构 面板显示 文本 面板中 HTML 代码的 DOM 结构。

结构 与 文本 面板为双向同步。 点击 DOM 结构中的节点时，WebStorm 会滚动显示 文本 面板中的内容。 这些面板也与浏览器同步：点击 DOM 结构或 文本 面板中的节点后，WebStorm 会在浏览器中高亮显示相应的元素。

若要查看已执行脚本的树状结构，请打开 脚本 选项卡。