是否可以将VSCode调试器的XML对象显示简化为类似Chrome DevTools的样式？

VSCode调试器默认会输出XML DOM对象的全量原型属性，而Chrome DevTools针对DOM类对象做了专门的精简展示优化，你可以通过以下几种方式实现类似的效果：

• 方法1：将XML直接转成普通JS对象查看
  引入xml-js这类XML转JS对象的工具库，请求返回后新增一行转换逻辑即可：

  const convert = require('xml-js');
  // 放在parser.parseFromString逻辑后面
  const simpleRes = convert.xml2js(response.data, {compact: true, ignoreComment: true});
  

  调试时直接查看simpleRes对象，结构和Chrome DevTools里的XML展示基本一致，不需要额外配置。
• 方法2：配置VSCode调试自定义格式化规则
  打开VSCode的settings.json，新增以下配置：

  "debug.javascript.customStringifiers": [
    {
      "className": "XMLDocument",
      "stringify": "return {root: this.documentElement.tagName, children: [...this.documentElement.children].map(n => ({tag: n.tagName, text: n.textContent, attrs: Object.fromEntries([...n.attributes].map(a => [a.name, a.value]))}))}"
    }
  ]
  

  配置生效后调试器展示XMLDocument对象时会自动输出精简后的结构。
• 方法3：调试时手动输入精简表达式
  不需要改代码和配置，在调试控制台直接输入对应表达式提取核心内容：
  • 查看原始XML内容：输入response.data即可看到和Postman一致的原始字符串
  • 查看根节点下所有子节点核心属性：输入[...parsedResponse.documentElement.children].map(n => ({标签: n.tagName, 内容: n.textContent, 属性: n.attributes}))

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