怎么在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打开。

bash 复制代码

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

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

bash 复制代码

pnpm i

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

把项目跑起来

bash 复制代码

npm/pnpm run dev

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

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

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

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

html 复制代码

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

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

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

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

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

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

json 复制代码

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