查看实际 HTML DOM
调试客户端代码时， 元素 工具窗口的 调试 选项卡会显示实际浏览器页面所使用的 HTML 源代码及其 HTML DOM 结构。
通过浏览器或编辑器对页面做出的任何更改也会立即反映在 元素 选项卡中。
目前，此功能仅在 Google Chrome 中并且仅在调试会话期间受支持。
准备开始之前
请确保设置中已启用 JavaScript and TypeScript 捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索框中输入 JavaScript and TypeScript。 如需进一步了解插件，请参见 插件管理。
请确保设置中已启用 JavaScript Debugger 捆绑插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索框中输入 JavaScript Debugger。 如需进一步了解插件，请参见 插件管理。
在 设置｜插件 页面上的 Marketplace 选项卡中安装并启用 Live Edit 插件，具体操作请参见 从 JetBrains Marketplace 安装插件。
按照 配置 JavaScript 调试器 中的说明配置内置调试器。
若要使对 HTML、CSS 或 JavaScript 代码所做的更改无需重新加载页面即可在浏览器中即时显示，请启用 Live Edit 功能。 如需进一步了解实时编辑功能，请参见 在 HTML、CSS 和 JavaScript 中使用 Live Edit。
查看实际页面的 HTML 源码和 DOM 结构
要开始调试会话，请创建 JavaScript Debug 类型的运行配置，然后点击工具栏中的 调试 按钮（
）。切换到 调试 工具窗口并打开 元素 选项卡。 该选项卡由两个只读面板组成。
文本 面板显示当前在浏览器中打开页面的 HTML 源代码。 浏览器中页面发生任何更改（例如点击图标）时，该面板中的代码会相应更新。
结构 面板显示 文本 面板中 HTML 代码的 DOM 结构。
结构 和 文本 面板会同步联动。 点击 DOM 结构中的节点时，GoLand 会滚动浏览 文本 面板的内容。 这些面板还与浏览器保持同步：一旦点击 DOM 结构或 文本 面板中的节点，GoLand 会在浏览器中高亮显示相应元素。
要查看已执行脚本的树状结构，请打开 脚本 选项卡。