JavaScript 浏览器断点调试中怎么在控制台中查看对象的原型链属性-js教程-PHP中文网

最可靠的方式是使用 console.dir() 方法，它以可交互树形结构展示对象完整原型链，包括 proto 及其向上延伸至 null 的各级原型，并支持展开查看构造函数、内置方法和继承属性。

javascript 浏览器断点调试中怎么在控制台中查看对象的原型链属性

在浏览器断点调试中，直接在控制台查看对象的原型链属性，最可靠的方式是使用 console.dir() 方法，而不是 console.log()。

用 console.dir() 展开完整原型结构

console.dir() 会以可交互的树形结构输出对象，明确展示 __proto__（即 [[Prototype]]）及其向上延伸的整个原型链，包括构造函数、内置方法和继承来的属性。

在断点处暂停后，在控制台输入 console.dir(obj)，然后点击展开 __proto__ 节点
每层 __proto__ 都可继续展开，直到 null（原型链终点）
注意：箭头函数、某些 Proxy 或内置对象（如 JSON）可能不显示标准 __proto__，但 console.dir 仍会尽力呈现其继承关系

手动访问 proto 和 getPrototypeOf

你也可以在控制台中直接读取和遍历原型链：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

obj.__proto__ —— 查看当前对象的直接原型（非标准但广泛支持）
Object.getPrototypeOf(obj) —— 标准方式，推荐用于兼容性场景
连续调用：Object.getPrototypeOf(Object.getPrototypeOf(obj)) 可逐级上溯
配合 Object.getOwnPropertyNames() 查看某一层原型上的自有属性：Object.getOwnPropertyNames(obj.__proto__)

在 Sources 面板中结合 Scope 面板观察

断点暂停时，Sources 面板右侧的 Scope 区域会列出当前作用域变量。虽然它默认只显示对象的自有属性，但你可以：

右键变量 → “Store as global variable”（例如生成 temp1）
立即在控制台执行 console.dir(temp1)，获得完整原型视图
或在 Watch 面板中添加表达式：Object.getPrototypeOf(temp1)，持续跟踪原型变化

小技巧：快速打印原型链路径

想一次性看到从对象到 null 的整条原型链？可在控制台运行这个简明脚本：

function logProtoChain(obj) {
  let chain = [];
  let current = obj;
  while (current !== null) {
    chain.push(current.constructor?.name || 'Object');
    current = Object.getPrototypeOf(current);
  }
  console.log(chain.join(' ← '));
}
logProtoChain(yourObj); // 输出类似：MyClass ← Animal ← Object ← null