chrome中可视化原型链最有效的方法是console.dir()，它以可折叠树形结构展示对象及其完整原型链，从实例→构造函数原型→object.prototype→null，支持dom元素、自定义类等所有对象类型。
在 Chrome 开发者工具中，最直接、可视化程度最高的方式是使用 Console 面板结合 __proto__ 展开或 Object.getPrototypeOf() 逐层查看，但真正“可视化原型链”的核心方法是利用 Debugger 面板的“Scope”或 Console 中的 console.dir() —— 它会以可折叠树形结构展示对象及其完整的原型链。
用 console.dir() 直观展开原型链
console.dir() 是 Chrome DevTools 中专为对象深度检查设计的方法，它会显示对象自身属性，并提供可点击展开的 [[Prototype]]（即 __proto__）节点，每一层都清晰标注构造函数名和继承关系。
- 在 Console 中输入：
console.dir([])→ 展开后能看到Array → Array.prototype → Object.prototype → null - 对自定义类实例也有效：
class A {}; console.dir(new A())→ 依次展开可看到A → A.prototype → Object.prototype → null - 注意：不要用
console.log()，它只打印简略字符串表示，不提供交互式原型树
在 Debugger 中断点后查看 Scope 下的原型链
当代码执行到断点时，在右侧 Scope 面板 中，局部变量若为对象，Chrome 会自动显示其 “Prototype”子项（需点击小箭头展开），并支持逐层向下钻取。
- 设置断点（如在构造函数内部或方法调用处）
- 刷新页面触发断点 → 在 Scope 面板找到目标变量 → 点击 “Prototype” → 继续点下一层的 “Prototype”
- 每层都会显示该原型对象的 constructor、方法及自有属性，null 作为终点自动终止
手动遍历并高亮关键原型节点
若需动态追踪或验证某对象的完整原型链路径，可用简单脚本在 Console 中打印带标识的链路：
- 运行这段代码：
function logProtoChain(obj) {<br> let chain = [];<br> let current = obj;<br> while (current !== null) {<br> chain.push(current.constructor ? current.constructor.name : 'null');<br> current = Object.getPrototypeOf(current);<br> }<br> console.log('Prototype chain:', chain.join(' → '));<br>} - 例如：
logProtoChain({})输出：Prototype chain: Object → null -
logProtoChain(new Date())输出：Prototype chain: Date → Object → null（注意：Date.prototype.__proto__ 就是 Object.prototype）
利用 Elements 面板辅助查看 DOM 元素原型链
选中 Elements 面板中的 DOM 节点后，在 Console 中输入 $0 即可引用它，再用 console.dir($0) 查看。DOM 对象的原型链通常更长（如 div → HTMLDivElement → HTMLElement → Element → Node → EventTarget → Object），Chrome 会完整渲染这一长链，且每个环节都可展开查看方法和属性。
- 选中一个
<div> 元素 → 打开 Console → 输入 <code>console.dir($0) - 展开 [[Prototype]]，逐级点开，注意 constructor 名称变化和继承的方法来源（如
addEventListener出现在EventTarget上） - 右键某个原型对象 → “Store as global variable” 可临时保存为
temp1，方便后续单独 inspect
