如何在Visual Studio Code的调试控制台中查看DOM结构？

以下方法均不需要安装额外扩展，直接使用VSCode内置调试能力即可实现：

方法1：调试控制台直接调用原生API #

• 断点暂停后直接在调试控制台输入console.dirxml(document.body)，会直接输出分层可折叠的结构化DOM树，支持点击展开查看任意节点的属性、子元素，不需要额外做格式化处理
• 如果需要导出完整的格式化HTML文本，输入以下命令即可将格式化后的DOM内容直接写入系统剪贴板，不需要手动复制再用第三方工具格式化：

copy(new XMLSerializer().serializeToString(document.body))

方法2：配置为一键触发的快捷操作 #

不需要每次手动输入命令，可配置为调试监视项一键触发：

1. 打开对应项目的调试配置文件 .vscode/launch.json
2. 在你正在使用的调试配置项中，添加watch字段如下：

{
  "configurations": [
    {
      // 你原有调试配置的其他字段，比如type、request、name等保留不变
      "watch": [
        "查看DOM树：console.dirxml(document.body)",
        "复制格式化DOM：copy(new XMLSerializer().serializeToString(document.body))"
      ]
    }
  ]
}

3. 之后每次断点触发时，打开VSCode左侧的「运行和调试」面板，找到「监视」栏，点击对应条目右侧的刷新按钮，即可直接执行对应操作

方法3：浏览器联动调试直接使用DOM面板 #

如果你的项目是浏览器端项目，使用Edge/Chrome调试模式启动的话，调试过程中左侧侧边栏会自动出现「浏览器」面板，面板内的「元素」标签页和浏览器F12开发者工具的元素面板完全一致，可直接查看实时DOM树，同时支持修改属性、样式，改动会实时同步到页面中

内容的提问来源于stack exchange，提问作者Nate Thompson