专业的

查看实际的 HTML DOM

确保在设置中启用JavaScript 和 TypeScript捆绑插件。按打开 IDE 设置，然后选择插件。单击“已安装”选项卡。在搜索字段中，输入JavaScript 和 TypeScript。有关插件的更多信息，请参阅管理插件。CtrlAlt0S

确保在设置中启用JavaScript 调试器捆绑插件。按打开 IDE 设置，然后选择插件。单击“已安装”选项卡。在搜索字段中，输入JavaScript 调试器。有关插件的更多信息，请参阅管理插件。CtrlAlt0S

在设置 |安装并启用实时编辑插件 插件页面，选项卡Marketplace ，如从 JetBrains Marketplace 安装插件中所述。

配置内置调试器，如配置 JavaScript 调试器中所述。

要使您对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中而无需重新加载页面，请激活实时编辑功能。有关实时编辑功能的更多信息，请参阅HTML、CSS 和 JavaScript 中的实时编辑。

要启动调试会话，请创建JavaScript 调试类型的运行配置，然后单击工具栏上的“调试”按钮 ( )。

切换到“调试”工具窗口并打开“元素”选项卡。该选项卡由两个只读窗格组成。

• 文本窗格显示当前在浏览器中打开的页面的 HTML 源代码。一旦浏览器中的页面发生任何更改（例如单击图标），窗格中的代码就会相应更新。

• “结构”窗格显示“文本”窗格中 HTML 代码的 DOM 结构。

结构和文本窗格相互同步。当您单击 DOM 结构中的节点时，PyCharm 会滚动文本窗格的内容。这些窗格也与浏览器同步：只要您单击 DOM 结构或文本窗格中的节点，PyCharm 就会在浏览器中突出显示相应的元素。

要查看已执行脚本的树，请打开“脚本”选项卡。