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

前言

今天给大家介绍一款可以在浏览器写代码的 vite 插件:vite-plugin-devtools-json

往期精彩推荐

正文

DevTools 是前端开发者不可或缺的工具,我们经常通过它调试功能,但是你可能不知道,它可以通过项目设置文件 devtools.json 在浏览器编写源代码!

谷歌开源的 vite-plugin-devtools-json 正是这样一款插件,它能够为 Vite 开发服务器实时生成 devtools.json 文件,实现与 DevTools 的新特性的无缝集成!

安装

bash 复制代码
npm install -D vite-plugin-devtools-json

配置

Vite 配置中添加该插件:

js 复制代码
import {defineConfig} from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson(),
    // ...
  ]
});

启动

bash 复制代码
npm run dev

浏览器使用

现在打开浏览器,切换到 devtool 标签,会看到提示打开文件夹,授权即可看到多了一个 wrokspace 选项,里面就是源代码文件!(授权之后无法复现截图了,见谅!)

点击 connect 按钮,即可授权修改本地文件!

家里的电脑 chrome 挂了,好在 Edge 浏览器也可以用这个插件!

原理

该插件会在 /.well-known/appspecific/com.chrome.devtools.json 路径下提供一个 JSON 格式的项目配置信息,结构如下:

json 复制代码
{
  "workspace": {
    "root": "/path/to/project/root",
    "uuid": "xxx"
  }
}

它会在你首次使用该插件启动 Vite 开发服务器时生成,并被缓存到 Vite 的缓存目录中!

最后

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

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

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

往期精彩推荐

相关推荐
小毛驴85029 分钟前
Vue 传统全局引入方式,ES 模块化方式引入 对比
前端·javascript·vue.js
一壶纱35 分钟前
vite 只是一个平台
vue.js·vite
前端赵哈哈1 小时前
🚀 从 Windi CSS 迁移到 Tailwind CSS v4 完整实践指南
前端·css·vue.js
天天向上10242 小时前
vue让elementUI和elementPlus标签内属性支持rem单位
javascript·vue.js·elementui
小宁爱Python2 小时前
Vue入门:vue项目的创建和基本概念
前端·javascript·vue.js
白雾茫茫丶3 小时前
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
vue.js·nuxt.js
FogLetter3 小时前
TypeScript + React:大型项目的黄金搭档
前端·react.js·typescript
掘金013 小时前
基于 vue3 的动态表单组件设计与实现
前端·javascript·vue.js
克里斯蒂亚诺·罗纳尔达3 小时前
vue请求golang后端CORS跨域问题深度踩坑
vue.js·golang
没有鸡汤吃不下饭3 小时前
解决vue项目遍历数据编辑失去响应问题
前端·vue.js