JavaScript 中原型链中 VS Code 怎么调试-js教程-PHP中文网

在 vs code 中调试 javascript 原型链，核心做法是启用 source maps 并配合 chrome devtools 的“call stack”（调用栈）面板。通过设置断点观察 `[[prototype]]` 属性变化，可以直观地追踪方法查找路径和继承关系。

JavaScript 中原型链中 VS Code 怎么调试

如何配置 VS Code 以支持原型链调试

要调试原型链，必须确保环境能映射到源码。使用 launch.json 配置 chrome 或 pwa-node 时，务必开启 sourceMaps: true。这能让调试器识别 ES6+ 编译后的代码结构，从而正确显示原型对象。

JavaScript 中原型链中 VS Code 怎么调试

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "trace": true
    }
  ]
}

上述配置针对 Web 环境。若使用 Node.js，将 type 改为 pwa-node 即可。关键在于 sourceMaps 字段，它允许调试器解析原型链上的方法来源。

如何在调试器中查看原型链细节

在断点暂停时，打开“Variables”（变量）面板。展开对象属性，找到 __proto__ 或 prototype 键。点击这些链接可深入查看原型对象内部结构。

Java 开发专家

精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo

下载

JavaScript 中原型链中 VS Code 怎么调试

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 断点设在此行

运行此代码并在 speak() 处断点。检查 this 对象，可见其 __proto__ 指向 Dog.prototype，而 Dog.prototype.__proto__ 指向 Animal.prototype。这种层级关系即为原型链。