怎么在VS Code 调试vue2 源码

总结一下怎么在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 

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

pnpm i

把项目跑起来

npm/pnpm run dev

从 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>/**"]
    }
  ]
}

点击VS Code的Run and Debug图标

点击Run and Debug图标， 选择调试Vue源码(就是我们配置launch.json里面配置的name)

看到app.js 进入我们打的断点了

我们点击Step Into

就进入Vue()构造函数了

调试vue3源码方法也一样 参考这篇笔记