vscode调试vite及其自带插件

1,892 阅读1分钟

1.准备工作

拉取源码、安装依赖、构建

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

2.开发模式运行vite代码

cd packages/vite
pnpm run dev

dev命令会执行soucemap模式下的构建,方便我们调试代码。

3.软链当前包

pnpm link --global

该命令的作用是从执行此命令的路径或通过

选项指定的文件夹,链接package到全局的node_modules中,所以使其可以被另一个使用pnpm link --global 的package引用。

4.运行demo&断点调试

/playground下提供了一部分demo,我们通过运行目录下面的demo对vite进行调试。

在vite源码中标记一处断点,之后可以在demo中使用JavaScript Debug Terminal或者快捷按钮运行dev。例如我现在在处理index.html的方法中标记了一处断点:

在demo中运行dev,命令行会输出开发服务成功启动的提示,由于我们是在处理html的时候打的断点,所以得访问开发服务的地址才会成功进入断点:

tips: 可以在vite命令后带上参数--debug,命令行会输出相关信息方便我们调试。

...
"dev": "vite --debug",
...

5.调试插件

plugin-vue为例,同理只需要在该插件根目录下运行:

pnpm run dev

则会自动将dist下的入口替换为开发文件的入口:

在源码里标记断点即可进入调试。