Chrome中查看JavaScript对象原型链需通过Console或Sources面板展开__proto__逐层追溯,终点为null;支持Object.getPrototypeOf()验证及instanceof判断,灰色文字表示继承属性。

在 Chrome 开发者工具中查看 JavaScript 对象的原型链([[Prototype]]),关键不是靠某个独立的“Prototype 面板”,而是通过 Sources 或 Console 中的对象检查功能,逐层展开其 __proto__ 或 [[Prototype]] 引用。Chrome 会以可视化方式展示整个原型链结构,包括内置构造器(如 Object、Array)和自定义原型上的属性与方法。
在 Console 中直接查看对象的原型链
在控制台输入一个对象(比如 const obj = { a: 1 };),回车后点击输出结果左侧的小箭头展开它:
- 你会看到
__proto__展开项 —— 这就是该对象的直接原型(即Object.prototype) - 继续点击
__proto__下的__proto__,就能一层层向上追溯,直到null(原型链终点) - 如果对象由构造函数创建(如
new Date()),顶层原型会是Date.prototype→Object.prototype→null
在 Sources 面板断点暂停时检查作用域内对象的原型
当代码在断点处暂停后,右侧 Scope 面板会列出当前上下文的所有变量;若某个变量是对象,可点击其值右侧的 ▶ 展开:
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 展开后能看到
__proto__字段,点开即可查看其原型对象的全部自有属性和方法 - Chrome 同时显示
[[Prototype]](内部槽位)的真实指向,与__proto__值一致(非标准但广泛支持) - 若原型上有 getter/setter 或不可枚举属性,它们也会以灰色或带锁图标标出,帮助识别行为来源
用 Object.getPrototypeOf() 和 constructor 验证原型关系
在 Console 或断点后的调试控制台中,可主动执行以下语句辅助判断:
-
Object.getPrototypeOf(obj)返回对象的原型(比obj.__proto__更规范) -
obj.constructor显示创建该对象的构造函数,它的prototype属性通常就是obj的原型 -
obj instanceof Array或obj instanceof MyConstructor可快速验证原型链中是否包含某构造器的prototype
注意原型链中的特殊表现
某些对象(如数组、正则、Promise)的原型链较深,Chrome 会自动折叠中间层。展开时留意:
- 灰色文字表示继承自上层原型的属性(非对象自身拥有)
- 带
(…)的方法名表示它是 getter 或访问器属性,点击才能看到实际值 - 若看到
[object Object]而不是可展开结构,说明该值是原始类型或已被垃圾回收,无法查看原型(原始类型无原型)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










