🚀🚀🚀什么？浏览器也能修改项目源文件了？Chrome 团队开源的超强 Vite 插件！🚀🚀🚀

前言

今天给大家介绍一款可以在浏览器写代码的 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 的缓存目录中!

最后

这个插件可以说是非常实用了，我们可以在浏览器调试预览一气呵成了！

仓库地址：github.com/ChromeDevTo...

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

往期精彩推荐

• ⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
• ⚡️Vitest 3.2 发布，测试更高效；🚀Nuxt v4 测试版本发布，焕然一新；🚗Vite7 beta 版发布了
• ⚓️ Oxlint 1.0 版本发布，比 ESLint 快50 到 100 倍！🚀🚀🚀
• 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军