如何调试 vite 源码?

简介: 如何调试 vite 源码?

准备


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

  1. 运行项目


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

用工具连上调试 websocket,以 chrome 为例:

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

1686387143285.png

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


1686387130054.png1686387118421.png

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

1686387107325.png

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

使用 webstorm 调试


  1. watch 模式打包 vite 源码

shell

复制代码

cd packages/vite
pnpm run dev

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

  1. 打断点

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

1686387068600.png

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

1686387044734.png

  1. 选择 Debug

1686387027460.png

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

1686387012064.png

使用 vscode 调试


参考这里

目录
相关文章
|
JavaScript 应用服务中间件 nginx
vuecli3打包项目上线之后报错怎么使用本地的sourcemap文件定位调试?
vuecli3打包项目上线之后报错怎么使用本地的sourcemap文件定位调试?
170 0
|
JavaScript
源码学习:Vite中加载环境变量(loadEnv)的实现
源码学习:Vite中加载环境变量(loadEnv)的实现
7231 0
|
3月前
|
存储 JavaScript
这一定是最有用的vite插件入门教程了!
【8月更文挑战第3天】 vite插件核心在于几个钩子函数的理解与使用,想开发vite插件,掌握这几个插件即可。本文中探讨了**config钩子**和**transformIndexHtml钩子**,相信大家看完对插件开发一定有了最基本的认识与方向!
75 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的时间管理小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的时间管理小程序附带文章源码部署视频讲解等
47 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的医笙小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的医笙小程序附带文章源码部署视频讲解等
24 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的仓库点单小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的仓库点单小程序附带文章和源代码部署视频讲解等
19 0
|
JavaScript
为老的vueCli项目添加vite支持
为老的vueCli项目添加vite支持
133 0
为老的vueCli项目添加vite支持
|
Web App开发 JavaScript
如何调试 vue3 源码
如何调试 vue3 源码
438 0
|
编译器 Go Apache
Kitex源码阅读——脚手架代码是如何通过命令行生成的(二)
通过本篇文章的讲解,将介绍kitex工具是如何通过命令行,生成go语言RPC服务的脚手架代码的,并且我们也自研了拥有脚手架生成功能的kitexx微框架。
236 0
Kitex源码阅读——脚手架代码是如何通过命令行生成的(二)
|
Go API 微服务
Kitex源码阅读——脚手架代码是如何通过命令行生成的(一)
前言 Kitex是字节跳动内部的Golang微服务RPC框架,先已开源。Kitex究竟是怎么生成脚手架代码的?这系列文章将围绕此展开源码阅读,并最终解答这个疑问。
292 0
Kitex源码阅读——脚手架代码是如何通过命令行生成的(一)
下一篇
无影云桌面