Chrome控制台如何查看JavaScript document对象的属性、方法与原型

Chrome控制台默认对document这类DOM节点对象做了展示优化，直接在控制台输入document回车时，会优先渲染对应DOM的HTML结构，不会像window这类普通JS对象一样默认展开属性列表，用下面几个方法就能拿到完整的对象、原型信息：

• 方法1：使用console.dir()（最常用）
  直接在控制台执行以下命令：

  console.dir(document)
  // 也可以直接用控制台内置简写，效果完全一致
  dir(document)
  

  输出结果是标准的JS对象可展开结构：
  • 第一层就能看到document自身的所有实例属性、绑定方法
  • 逐层展开结构里的__proto__字段，就能顺着原型链依次查看Document、HTMLDocument、Node、EventTarget、Object每一层原型上挂载的所有属性和方法
• 方法2：遍历提取全量属性名
  如果需要直接拿到所有属性/方法的名称列表，不需要可视化展开，可以用JS原生API遍历：

  // 仅获取document实例自身的所有属性（含不可枚举属性）
  console.log(Object.getOwnPropertyNames(document))
  
  // 递归遍历整个原型链，按层级打印所有属性
  let current = Object.getPrototypeOf(document)
  while (current) {
    console.log(`[原型层级：${current.constructor.name}]`, Object.getOwnPropertyNames(current))
    current = Object.getPrototypeOf(current)
  }
  

注意：不要用console.log(document)尝试查看对象，这个API对DOM节点依然会默认输出HTML结构，不会返回JS对象属性视图。

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