查看实际 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、CSS 和 JavaScript 中的实时编辑。
查看实际页面的 HTML 源代码和 DOM 结构
要开始调试会话，请创建 类型为 JavaScript Debug的运行配置，然后在工具栏上点击 调试 按钮（
）。切换到 调试 工具窗口并打开 元素 选项卡。 该选项卡由两个只读窗格组成。
文本 窗格显示当前在浏览器中打开的页面的 HTML 源代码。 一旦在浏览器中的页面进行了任何更改（例如，点击图标），窗格中的代码将相应更新。
结构 窗格显示 文本 窗格中 HTML 代码的 DOM 结构。
结构 和 文本 窗格相互同步。 当您在 DOM 结构中点击某个节点时，PyCharm 会滚动浏览 文本 窗格的内容。 这些窗格还与浏览器同步：一旦您在 DOM 结构或在 文本 窗格中点击某个节点，PyCharm 会在浏览器中高亮显示相应元素。
要查看已执行脚本的树，请打开 脚本 选项卡。