网页调试工具

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

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

选择调试工具

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

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

erdua

• 最新版本：
• 当前版本：3.4.1
• 项目主页
  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.0.2
• 项目主页
  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/

赞赏支持