网页调试

WhiteSevs
2023-09-13T17:19:11Z

内置多种网页调试工具，包括：Eruda、vConsole、PageSpy、Chii，可在设置菜单中进行详细配置

网页调试工具

注：并非所有功能都是默认开启，有些功能需要到油猴菜单中打开【设置】，手动开启功能。

一个集合了各种用于调试网页的油猴脚本。

选择调试工具

通过油猴菜单，打开设置->总设置->调试工具，选择一个想使用的调试工具。

当开启菜单功能允许在iframe内运行时，会自动将iframe的地址注册到油猴菜单中。

erdua

最新版本：

当前版本：3.4.3

项目主页
https://github.com/liriliri/eruda

项目最新地址
https://cdn.jsdelivr.net/npm/eruda
https://fastly.jsdelivr.net/npm/eruda
https://testingcf.jsdelivr.net/npm/eruda

【插件】 展示页面的 fps 和内存信息

【插件】 浏览器特性检测

【插件】 展示性能资源数据

【插件】 运行 JavaScript 代码

【插件】 运行 JavaScript 性能测试

【插件】eruda-geolocation 测试地理位置接口

【插件】 测试重力感应接口

【插件】 可以直接在移动端查看调试Vue.js应用

【插件】 可视化屏幕 Touch 事件触发

【插件】 给页面的元素添加边框

【插件】 这是一个高精度的UI恢复辅助工具，致力于让前端开发人员头疼和崩溃。设计师检查工具。

注意：页面中如果存在CSP策略，插件将无法加载。使用以下方式可禁用CSP

chrome插件 - Disable Content-Security-Policy

edge插件 - Disable Content-Security-Policy

firefox - 在about:config菜单配置中，禁用security.csp.enable

VConsole

最新版本：

当前版本：3.15.1

项目主页
https://github.com/Tencent/vConsole

项目最新地址
https://cdn.jsdelivr.net/npm/vconsole
https://fastly.jsdelivr.net/npm/vconsole
https://testingcf.jsdelivr.net/npm/vconsole

【插件】vconsole-stats-plugin: A vConsole plugin which can show Stats in front-end.

【插件】vconsole-outputlog-plugin: 使用该插件可以复制或下载console中打印的log

【插件】 Vue-vConsole-devtools 是一款vConsole插件，把Vue.js官方调试工具vue-devtools移植到移动端，可以直接在移动端查看调试Vue.js应用

PageSpy

🎈注意：默认配置的test.jikejishu.com是测试使用，别人也可以看得到你的调试信息，包括Cookie，如果可以请自己部署一个调试服务器

最新版本：

当前版本：2.2.10

项目主页
https://github.com/HuolalaTech/page-spy-web

SDK地址
https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-browser

项目最新地址
https://cdn.jsdelivr.net/npm/@huolala-tech/page-spy-browser
https://fastly.jsdelivr.net/npm/@huolala-tech/page-spy-browser
https://testingcf.jsdelivr.net/npm/@huolala-tech/page-spy-browser

Chii

项目主页
https://github.com/liriliri/chii/blob/master/README_CN.md

调试示例页面(demo)
https://chii.liriliri.io/

赞赏支持