查看实际的HTML DOM

查看实际的HTML DOM

在调试会话期间，您可以在“调试”工具窗口的“元素（Elements）”选项卡中查看实现实际浏览器页面及其HTML DOM结构的HTML源代码。此外，通过浏览器对页面所做的任何更改都会立即反映在“元素”选项卡中。要监视您在编辑器中所做的更改，请安装JetBrains Chrome扩展并启用实时编辑功能，如“HTML，CSS和JavaScript中的实时编辑”中所述。

目前，此功能仅适用于Google Chrome，且仅在调试会话期间支持。

查看实际页面的HTML源代码和DOM结构

1. 要启动调试会话，请创建JavaScript Debug类型的运行配置 ， 然后单击工具栏上的。
2. 切换到“调试”工具窗口并打开“元素”选项卡。该选项卡由两个窗格组成，两个窗格都是只读的。
   • “文本”窗格显示当前在浏览器中打开的页面的HTML源代码。只要对浏览器中的页面进行任何更改（例如，单击图标），就会相应地更新窗格中的代码。
   • “结构”窗格显示“文本”窗格中HTML代码的DOM结构。
   该结构和文本窗格相互同步。单击DOM结构中的节点时，IntelliJ IDEA将滚动“文本”窗格的内容。窗格也与浏览器同步：只要单击DOM结构或“文本”窗格中的节点，IntelliJ IDEA就会突出显示浏览器中的相应元素。
3. 要查看已执行脚本的树，请打开“脚本”选项卡。