前言
今天给大家介绍一款可以在浏览器写代码的 vite 插件：vite-plugin-devtools-json
往期精彩推荐
- ⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
- ⚡️Vitest 3.2 发布，测试更高效；🚀Nuxt v4 测试版本发布，焕然一新；🚗Vite7 beta 版发布了
- ⚓️ Oxlint 1.0 版本发布，比 ESLint 快50 到 100 倍！🚀🚀🚀
- 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军
正文
DevTools 是前端开发者不可或缺的工具，我们经常通过它调试功能，但是你可能不知道，它可以通过项目设置文件 devtools.json 在浏览器编写源代码！
谷歌开源的 vite-plugin-devtools-json 正是这样一款插件，它能够为 Vite 开发服务器实时生成 devtools.json 文件，实现与 DevTools 的新特性的无缝集成!
安装
npm install -D vite-plugin-devtools-json
配置
在 Vite 配置中添加该插件：
import {defineConfig} from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';
export default defineConfig({
plugins: [
devtoolsJson(),
// ...
]
});
启动
npm run dev
浏览器使用
现在打开浏览器，切换到 devtool 标签，会看到提示打开文件夹，授权即可看到多了一个 wrokspace 选项，里面就是源代码文件！（授权之后无法复现截图了，见谅！）
点击 connect 按钮，即可授权修改本地文件！
家里的电脑
chrome挂了，好在Edge浏览器也可以用这个插件！
原理
该插件会在 /.well-known/appspecific/com.chrome.devtools.json 路径下提供一个 JSON 格式的项目配置信息，结构如下：
{
"workspace": {
"root": "/path/to/project/root",
"uuid": "xxx"
}
}
它会在你首次使用该插件启动 Vite 开发服务器时生成，并被缓存到 Vite 的缓存目录中!
最后
这个插件可以说是非常实用了，我们可以在浏览器调试预览一气呵成了！
今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！
