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