怎么在VS Code 调试vue2 源码

掘金前端

gongzemin

2026年4月11日 14:19

总结一下怎么在VS Code 调试vue2 源码

克隆vue2源码到本地
在源码根目录安装依赖把项目跑起来生成/dist/vue.js文件
在/examples/ 下随便找个文件(引入的文件要是我们生成的vue.js) 打上断点
安装Live Server插件把我们打上断点的文件在浏览器打开
在.vscode文件夹下配置launch.json
点击VS Code的Run and Debug图标就可以进入了

我们开始吧～

克隆vue2源码到本地

去Github克隆源码，克隆后我们用VS Code打开。

git clone https://github.com/vuejs/vue

在源码根目录安装依赖把项目跑起来

pnpm i

把项目跑起来

npm/pnpm run dev

bundles /Users/gongzemin/Documents/GitHub/vue/src/platforms/web/entry-runtime-with-compiler.ts → dist/vue.js...

从 entry-runtime-with-compiler.ts 这个入口文件打包生成 dist/vue.js 这个最终可用的 Vue 文件

生成了dist文件夹里面有vue.js

在examples/ 下随便找个文件打上断点

我们找examples/classic/commits/app.js 在如图位置打上断点

commits/index.html 这个文件引入了vue.min.js, 我们刚才构建出来的是vue.js文件，我们把引入的文件改成vue.js

<script src="../../../dist/vue.js"></script>

安装Live Server插件把我们打上断点的文件在浏览器打开

安装好插件后，打开文件的上下文菜单可以看到Open with Live Server

这样我们就可以打开我们的examples/classic/commits/index.html 文件了是用服务器打开的

在.vscode文件夹下配置launch.json

注意这里的URL是我们的要调试URL路径

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run parser",
      "runtimeExecutable": "parser",
      "cwd": "${workspaceFolder}/packages/reactivity-transform/node_modules/@vue/compiler-core",
      "args": []
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "调试Vue源码",
      "url": "http://localhost:5501/examples/classic/commits/index.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///packages/*": "${webRoot}/packages/*",
        "*": "${webRoot}/*"
      },
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}