Vite5.0 调试源码

笔者成功通过chrome工具来调试源码，但是遇到了很多问题，现在记录下。

准备源码

git clone https://github.com/vitejs/vite.git

这边vite是5.0的，其项目目录如下：

vite5.0要求node版本大于18，这边node版本要注意下。

第一步：安装依赖，这边要使用pnpm安装

pnpm i

其中遇到了bcrypt包安装不了，这个包不影响vite的调试，所以把它从package.json中直接去掉了，然后pnpm i安装正常。

然后我们到/packages/vite目录下，执行pnpm run dev打包本地vite的源码。

然后我们找到/packages/vite/bin/vite.js文件，找到它的文件位置，我这边是D:/vite/packages/vite/bin/vite.js，把它复制下，后面我们会用它来替代项目中node_module中的vite。

准备vite项目

pnpm create vite vite-debugger -- --template vanilla
cd vite-debugger
pnpm i

然后我们进入项目中的package.json，添加script内容：

{
  // ...省略
  "script": {
    // 添加
    "debug": "node --inspect --inspect-brk D:/vite/packages/vite/bin/vite.js"
  }
  // ...省略
}

执行npm run debug启动调试。

这是我们再次到vite源码中添加debugger，

/packages/vite/src/node/cli.ts 文件中加上debugger

在chrome浏览器地址栏输入：chrome://inspect, 等待下面的Remote Target出现。

点击inspect后，chrome跳出调试面板

成功调试👍👍

这只是调试源码的一种，如果有更好的方法，欢迎一起交流😊