携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天
先自行克隆项目如下
git clone github.com/vitejs/vite…
cd vite
pnpm install
cd packages/vite
pnpm run dev
最后的pnpm run dev 得到了构建后的vite包，构建物在同目录的dist目录下，这里要主意的是构建出来的包一定要是带有sourcemap的文档的构建物，不然无法调试
然后后在vite/src/node/cli.ts中打断点
在圈出的红色位置上打点击 有红点表示一个debug
最后playground中随便找个示例，比如alias示列如下运行dev(点击运行调试)
运行后就会跳到断点处
如果要在浏览器上调试可以运行debug(点击运行调试)
在chrome浏览器上打开chrome://inspect/#devices 链接 会看到如下点击inspect 就可以调试了
点击inspec
进入调试面板 点击open file 搜索vite的文件 如cli.ts ,再点击进入文档 加个断点如下
如没有看到inspec 可以配置目标 运行的ws的地址和端口
配置后点击done等一等 如果配置对了应该会出来了
然后重新运行debug, 如果是处理项目文件相关的插件断点只需要刷新服务地址 http://127.0.0.1:5173/
浏览器和vscode都可以调试源码了，和平时在浏览上debug一模一模，很方便
这里说的vite源码调试，同样的方式也适合其它的源码，注意运行的代码是不是带有sourcemap
