Vue生产环境(production) Devtools 调试

使用本脚本支持直接调试生产环境的Vue项目 完美支持Vue2、Vue3!

目前为 2022-09-10 提交的版本。查看 最新版本

作者
xcr1234
评分
0 0 0
版本
1.2.1
创建于
2022-04-19
更新于
2022-09-10
大小
32.1 KB
许可证
暂无
适用于
所有网站

油猴脚本脚手架

特性

  • TypeScript完全支持
  • Babel完全支持 使用目前主流的@babel/preset-env
  • 热更新部署 每次更新会自动同步到油猴中,不需要手动复制粘贴!

使用方式

clone本项目,然后执行npm install

开发

一个完整的油猴脚本格式如下

// ==UserScript==

// 这部分是头部区域,一般来说不会经常修改

// ==/UserScript==

// 这里是正文,也就是脚本的执行部分,是需要经常修改的
console.log('hello world')

头部区域

头部区域的开发是在header/index.ts,使用了typescript,这样会有IDE完全支持,而不是单纯的写几个注释

img

开发完毕后执行npm run build:header编译

正文

正文开发是在src/index.ts,在开发时,如果使用到GM_相关函数,有完整的声明支持:

img

热部署

1.先执行 npm run build 编译一次,编译结果为 dist/main.js

2.执行 npm run start:server 启动 http://localhost:7000服务

默认用户名/密码为derjanb / secret

在油猴中设置

img

3.点 + ,把第1步编译的结果dist/main.js粘贴进去 保存

img

img

img

4.执行 npm run sync,现在每次更新就会自动同步到油猴中了,不需要手动粘贴!

发布

执行 npm run build 编译最新的文件

备注

本项目中引用以下资源

tempermonkey.d.ts

server.js (有修改)