在 chrome devtools 中查看 class 语法，最直接的方法是在 sources 面板的 file system 视图中打开包含该类的 js 文件，并在代码编辑器中展开类定义。devtools 会自动解析 es6 class 结构，通过点击类名左侧的小箭头或折叠按钮，可以直观地看到 constructor、实例方法和静态方法的层级关系。此外，在 console 面板中直接输入类名并回车，也能以对象树的形式展示其原型链和属性。
如何在 Sources 面板中展开类结构
在 Sources 面板中，找到你的 JavaScript 源文件并打开。ES6 的 class 关键字会被 DevTools 识别为一种特殊的函数声明。你可以直接在代码视图中看到类的定义块。点击类名旁边的折叠图标（通常是一个小三角或箭头），即可展开或收起该类的所有成员。这种视图清晰地展示了 constructor 以及挂载在 prototype 上的方法，帮助开发者快速定位逻辑。
// User.js
class User {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, ${this.name}`);
}
static createAdmin() {
return new User('Admin');
}
}
上述代码在 DevTools Sources 面板中的表现如下：点击 User 类左侧的折叠控件，会展开显示 constructor 和 greet 方法。这些方法在内部实际上被添加到 User.prototype 上。静态方法 createAdmin 则直接作为 User 函数的属性存在，通常在类定义的同一层级可见，但不会出现在原型展开列表中。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
如何在 Console 中检查类的原型链
在 Console 面板中，直接输入类名 User 并按回车。DevTools 会以可交互的对象树形式返回该类的构造函数。展开这个对象，可以看到 prototype 属性。进一步展开 prototype，就能看到所有实例共享的方法，如 greet。同时，可以直接调用 new User('Test') 创建实例，并检查其实例的属性。这种方法适合快速验证类的继承关系和方法归属。
// Console 操作示例
> User
< [class User]
> Object.getPrototypeOf(User.prototype)
< [Object: null prototype] {}
> const u = new User('Alice')
< User {name: 'Alice'}
> u.greet()
< Hello, Alice
在 Console 中，User 本身是一个构造函数。通过 Object.getPrototypeOf(User.prototype) 可以确认其原型链指向 Object.prototype。创建的实例 u 拥有自己的属性 name，并通过原型链访问 greet 方法。这种交互式检查方式比阅读源码更动态，能实时反映类在运行时的状态。
基于静态方法 createAdmin 的具体行为问题
针对代码中的静态方法 createAdmin，在 DevTools 中查看时，它不会出现在实例的原型链中。当你在 Sources 面板展开类定义时，createAdmin 通常显示为类的一个直接属性，而不是原型方法。在 Console 中，你可以直接调用 User.createAdmin()，它会返回一个新的 User 实例。这种行为符合静态方法的定义：它们属于类本身，而非类的实例。在调试时，如果需要修改静态方法的逻辑，直接在 Sources 面板中找到并编辑即可，无需重启页面，DevTools 支持即时重载。
