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