查看实际的HTML DOM

2018-09-20 11:30 更新

查看实际的HTML DOM

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

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

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

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号