怎么在VS Code 调试vue3 源码

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

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

我们开始吧～

克隆vue3源码到本地

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

git clone 

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

pnpm i

如果puppeteer没安装成功 可能要多试几次 我用的pnpm 后面重新安装 那些依赖全部可以复用(reused)

把项目跑起来

npm/pnpm run dev

会生成packages/vue/dist/vue.global.js

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

我们找packages/vue/examples/classic/commits.html 在如图位置打上断点

commits.html 这个文件引入了我们刚才构建出来的vue.global.js文件，所以打断点能进入对应的源码

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

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

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

这样我们就可以打开我们的classic/commits.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:5500/packages/vue/examples/classic/commits.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)

看到commits.html 进入我们打的断点了，可以看到进入mount方法这里

我们点击Step Into

就进入app.mount方法的源码了（精准的进入 不会走vite 对应的第三方包 一大堆最后才到对应的源码）

一个小贴士

在VS Code有一个debug console， 如果我们想打印出来具体传参，我们可以利用这个窗口