JavaScript 原型链中怎么在调试工具中清晰查看对象的原型层级-js教程-PHP中文网

console.dir()是最直接查看原型链的方式，它以交互树形结构展示对象自身属性、__proto__节点及各层构造函数等信息。

javascript 原型链中怎么在调试工具中清晰查看对象的原型层级

在浏览器开发者工具中，最直接的方式是用 console.dir() 输出对象，它会完整展开原型链，比 console.log() 更清晰展示 __proto__ 和继承关系。

用 console.dir() 展开查看原型结构

console.dir(obj) 会在控制台以可交互树形结构显示对象，包括：
– 自身属性（可编辑）
– __proto__ 节点（点击可逐层展开）
– 每一层的构造函数、方法、是否来自 Object.prototype 等信息
例如：

console.dir({a: 1}); // 展开后能看到 __proto__: Object → __proto__: null

在控制台中手动访问 proto 逐级查看

在控制台输入表达式可快速跳转原型层级：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

obj.__proto__ — 查看第一层原型
obj.__proto__.__proto__ — 查看第二层（通常是 Object.prototype）
obj.__proto__.constructor.name — 知道当前原型由哪个构造函数创建
对内置对象（如数组），[].__proto__ 显示 Array.prototype，再点 __proto__ 就到 Object.prototype

利用“Properties”面板配合“Prototype”筛选

选中一个对象（比如通过断点暂停或 console.dir() 后点击对象图标），在右侧“Properties”面板中：
– 默认显示所有自有属性和原型链上的属性
– 勾选顶部的 “Prototype” 复选框（Chrome/Firefox 支持），可只高亮显示原型链上的成员
– 展开 <prototype></prototype> 节点，就能看到从当前对象开始逐级向上的完整继承路径

辅助技巧：打印原型链路径（适合复杂继承）

临时加一段调试代码，把原型链转成易读路径：

function logProtoChain(obj) {
  let chain = [];
  for (let p = obj; p; p = Object.getPrototypeOf(p)) {
    chain.push(p.constructor ? p.constructor.name : 'null');
  }
  console.log('Proto chain:', chain.join(' → '));
}
logProtoChain(new Date()); // 输出：Date → Object → null