【调试技巧】利用sourcemap调试Vue源码最近在刷神光大佬的调试小册，在学习如何调试Vue源码。但因为小册内容已经

背景

最近在刷神光大佬的调试小册，在学习如何调试Vue源码。但因为小册内容已经发布很久了，按照小册文章里的指引，并不能达到所说的效果。只能自己一边查资料，一边摸索。最后功夫不负有心人，终于成功地达到了文章里的效果，所以写下这篇文章记录下。

1.vueCli创建vue3项目

通过 vue cli 创建项目（要用 5.0 以上的 cli）, 安装@vue/cli后，执行以下命令创建vue3项目：

vue create vue-demo2

选择 vue3 模板创建项目。

安装完成后，进入 vue-demo2 目录，运行项目:

生成sourcemap

修改vue.config.js，生成sourcemap：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack(config){
    // 生成 sourcemap
    config.devtool = 'source-map';
  }
})

断点调试，测试效果：断点停在正确的文件，而不是其它奇奇怪怪的文件里面。

创建 .vscode 目录下的 launch.js 文件:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

开启本地调试：

可以看到，断点停在了正确的文件，文件路径为本地绝对路径，说明 sourcemap 配置成功。

至此，调试本地项目就足够了，打的断点都能跟项目文件对应得上。但如果要调试Vue源码，还不行。因为可以发现，源码文件路径都是编译后的路径：

2.clone vue3项目代码

想要调试Vue源码，需要从github里把项目代码拉下来，然后手动build出sourcemap文件，再替换到自己的项目里才行。

clone代码：

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

设置生成sourcemap文件的配置

clone项目代码后，需要手动更改rollup.config.js文件里涉及sourcemap的相关配置，sourcemap相关的地方，都设置为true：

把package.json文件里的puppeteer依赖删除，这是自动化测试相关的包，跟项目构建无关，且严重拖慢下载速度。pnpm i下载完依赖后，再pnpm run build，会发现生成的dist目录里，有sourcemap相关文件：

复制对应dist目录到vue项目

在vue-demo2项目里，本地运行调试起来，我们可以看到需要替换的路径：有以下两个路径的dist目录需要我们进行替换：

node_modules\.pnpm\@vue+runtime-core@3.5.3\node_modules\@vue\runtime-core\dist
node_modules\.pnpm\@vue+runtime-dom@3.5.3\node_modules\@vue\runtime-dom\dist

把源码build后的dist目录替换到vue-demo2项目里对应的dist目录即可：

把源码项目的packages\runtime-core\dist替换到node_modules\.pnpm\@vue+runtime-core@3.5.3\node_modules\@vue\runtime-core\dist
把源码项目的packages\runtime-dom\dist替换到node_modules\.pnpm\@vue+runtime-dom@3.5.3\node_modules\@vue\runtime-dom\dist

替换目录后，再运行本地调试看看：

可以看到，这时候源码对应的文件路径都是本地的路径了。看似没什么问题，但如果你点击某个文件，想要修改文件时，会发现提示不可编辑。这样我们就无法打断点，打console了:

原因是文件的本地路径不对，所以点开的文件是只读状态，不能编辑。要解决这个问题，我们需要配置下源码项目的rollup.config.js，使生成的sourcemap文件映射到正确的本地绝对路径：

  // 配置 sourcemap 生成本地绝对路径映射
  output.sourcemapPathTransform = (relativeSourcePath, sourcemapPath) => {
    const newSourcePath = path.join(path.dirname(sourcemapPath), relativeSourcePath);
    return newSourcePath;
  }

配置完成后，重新pnpm run build，并且重新进行dist目录的替换。然后重新在vue-demo2项目里本地调试运行起来：

可以看到，此时映射的文件是可编辑的。这样就可以既调试本地项目的代码，也可以调试Vue的源码了。

问题记录

`vue-demo2`项目本地调试运行报错

刚刚创建完项目，生成launch.js文件后，本地调试运行起来，会发现有这个报错：

解决方案是，在main.js文件里添加如下的代码：

// 定义特性标志
window.__VUE_PROD_DEVTOOLS__ = false;
window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;

重新运行就没报错了：

`dist`目录替换后没效果

缓存导致的，删除 node_modules/.cache目录后，重新npm run serve即可。

rm -rf node_modules/.cache/

文章参考

实战案例：调试 Vue 源码

【调试技巧】利用sourcemap调试Vue源码

背景