查看实际 HTML DOM
当您调试客户端代码时， 元素 工具窗口的 调试 选项卡会显示实现实际浏览器页面的 HTML 源代码及其 HTML DOM 结构。
任何通过浏览器或在编辑器中对页面所做的更改也会立即反映在 元素 选项卡中。
当前此功能仅支持 Google Chrome 且仅在调试会话期间支持。
开始之前
确保在设置中启用 JavaScript and TypeScript捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，输入 JavaScript and TypeScript。 如需了解有关插件的更多信息，请参阅 管理插件。
请确保在设置中启用 JavaScript Debugger 捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，输入 JavaScript Debugger。 如需了解有关插件的更多信息，请参阅 管理插件。
您可以按照 从 JetBrains Marketplace 安装插件 中的描述在 设置 | 插件 页面的 Marketplace 选项卡上安装并启用 Live Edit 插件。
按照 配置 JavaScript 调试器 中的描述配置内置调试器。
要使您对 HTML、CSS 或 JavaScript 代码所做的更改在不重新加载页面的情况下立即在浏览器中显示，请激活 Live Edit功能。 有关实时编辑功能的更多信息，请参阅 在 HTML、CSS 和 JavaScript 中实时编辑。
查看实际页面的 HTML 源代码和 DOM 结构
要开始调试会话，请创建一个 JavaScript Debug 类型的运行配置，然后点击工具栏上的 调试 按钮 (
)。切换到 调试 工具窗口并打开 元素 选项卡。 该选项卡由两个只读窗格组成。
文本 窗格显示浏览器中当前打开页面的 HTML 源代码。 一旦在浏览器中的页面做出任何更改（例如，点击一个图标），窗格中的代码就会相应地更新。
结构 窗格显示 文本 窗格中 HTML 代码的 DOM 结构。
结构 和 文本 窗格是相互同步的。 当您点击 DOM 结构中的一个节点时，IntelliJ IDEA 将滚动浏览 文本 面板的内容。 窗格也与浏览器同步：只要您在 DOM 结构中或在 文本 窗格中点击一个节点，IntelliJ IDEA 就会在浏览器中高亮显示相应的元素。
若要查看已执行脚本的树状图，请打开 脚本 选项卡。