Vue生产环境(production) Devtools 调试

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

目前为 2024-07-23 提交的版本。查看 最新版本

作者
xcr1234
评分
0 0 0
版本
2.0.0
创建于
2022-04-19
更新于
2024-07-23
大小
17.4 KB
许可证
暂无
适用于
所有网站

Vue生产环境(production) Devtools 调试

使用本脚本,在生产环境也可以使用Vue Devtools调试你的项目,支持Vue2、Vue3
1.1版本对hook方式进行了重写,结构更清晰
正常情况下,开启成功后,控制台会显示:,并且可以使用Vue Devtools:

img

img

使用方法:
方法1
在你的vue项目,按F12打开控制台,复制dist/main.js中的内容执行
方法2
(1)在浏览器安装 tampermonkey 插件
(2)去greasyfork安装脚本

开发

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

// ==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 编译最新的文件