准备

git clone https://github.com/vitejs/vite
cd vite 
pnpm install
pnpm run build

拉取源码，安装依赖，并进行一次构建

调试内置项目

vite 的内置项目，在 playground 文件夹内，里面有非常多项目，我们挑选其中的 vue 项目进行测试

1. watch 模式打包 vite 源码

cd packages/vite
pnpm run dev

编译 vite 源码，并 watch 源码更改，dev 命令打包的源码，会带有 sourcemap

2. 运行项目

pnpm run debug
# 实际会运行 node --inspect-brk ../../packages/vite/bin/vite

用工具连上调试 websocket，以 chrome 为例：

1. 在 chrome 输入连接： chrome://inspect/#devices
2. 稍作等候，可以看到 Remote Target 中会出现以下内容

如果没有，可以配置发现 target 的 ip 和端口，确保配置中有调试端口

3. 点击 inspect 会进入到 chrome 的调试工具

4. 接下来就可以调试代码了

使用 webstorm 调试

1. watch 模式打包 vite 源码

cd packages/vite
pnpm run dev

编译 vite 源码，并 watch 源码更改

2. 打断点

这里假设想调试 vite dev 命令，代码在 packages/vite/src/node/cli.ts，那可以在这里打个断点

3. 打开 playground/vue/package.json 点击 dev script 的运行按钮

4. 选择 Debug

5. 程序会在断点处停下来

使用 vscode 调试

参考这里