在 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 函数的属性存在，通常在类定义的同一层级可见，但不会出现在原型展开列表中。
如何在 Console 中检查类的原型链
在 Console 面板中，直接输入类名 User 并按回车。DevTools 会以可交互的对象树形式返回该类的构造函数。展开这个对象，可以看到 prototype 属性。进一步展开 prototype，就能看到所有实例共享的方法，如 greet。同时，可以直接调用 new User('Test') 创建实例，并检查其实例的属性。这种方法适合快速验证类的继承关系和方法归属。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
// Console 操作示例
> User
Object.getPrototypeOf(User.prototype)
const u = new User('Alice')
u.greet()
<p>在 Console 中，<code>User</code> 本身是一个构造函数。通过 <code>Object.getPrototypeOf(User.prototype)</code> 可以确认其原型链指向 <code>Object.prototype</code>。创建的实例 <code>u</code> 拥有自己的属性 <code>name</code>，并通过原型链访问 <code>greet</code> 方法。这种交互式检查方式比阅读源码更动态，能实时反映类在运行时的状态。</p><h2>基于静态方法 createAdmin 的具体行为问题</h2><p>针对代码中的静态方法 <code>createAdmin</code>，在 DevTools 中查看时，它不会出现在实例的原型链中。当你在 Sources 面板展开类定义时，<code>createAdmin</code> 通常显示为类的一个直接属性，而不是原型方法。在 Console 中，你可以直接调用 <code>User.createAdmin()</code>，它会返回一个新的 <code>User</code> 实例。这种行为符合静态方法的定义：它们属于类本身，而非类的实例。在调试时，如果需要修改静态方法的逻辑，直接在 Sources 面板中找到并编辑即可，无需重启页面，DevTools 支持即时重载。</p>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
