# 网页调试工具

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

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

## 选择调试工具

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

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

## erdua

- 最新版本：[![npm version](https://img.shields.io/npm/v/eruda/latest.svg?label=eruda)](https://www.npmjs.com/package/eruda)
- 当前版本：`3.4.3`
- 项目主页<br>[https://github.com/liriliri/eruda](https://github.com/liriliri/eruda)
- 项目最新地址<br>[https://cdn.jsdelivr.net/npm/eruda](https://cdn.jsdelivr.net/npm/eruda)<br>[https://fastly.jsdelivr.net/npm/eruda](https://fastly.jsdelivr.net/npm/eruda)<br>[https://testingcf.jsdelivr.net/npm/eruda](https://testingcf.jsdelivr.net/npm/eruda)
- 【插件】![https://github.com/liriliri/eruda-monitor](https://img.shields.io/npm/v/eruda-monitor/latest.svg?label=eruda-monitor) 展示页面的 fps 和内存信息
- 【插件】![https://github.com/liriliri/eruda-features](https://img.shields.io/npm/v/eruda-features/latest.svg?label=eruda-features) 浏览器特性检测
- 【插件】![https://github.com/liriliri/eruda-timing](https://img.shields.io/npm/v/eruda-timing/latest.svg?label=eruda-timing) 展示性能资源数据
- 【插件】![https://github.com/liriliri/eruda-code](https://img.shields.io/npm/v/eruda-code/latest.svg?label=eruda-code) 运行 JavaScript 代码
- 【插件】![https://github.com/liriliri/eruda-benchmark](https://img.shields.io/npm/v/eruda-benchmark/latest.svg?label=eruda-benchmark) 运行 JavaScript 性能测试
- 【插件】[eruda-geolocation](https://github.com/WhiteSevs/eruda-geolocation) 测试地理位置接口
- 【插件】![https://github.com/liriliri/eruda-orientation](https://img.shields.io/npm/v/eruda-orientation/latest.svg?label=eruda-orientation) 测试重力感应接口
- 【插件】![https://github.com/liriliri/eruda-vue](https://img.shields.io/npm/v/eruda-vue/latest.svg?label=eruda-vue) 可以直接在移动端查看调试Vue.js应用
- 【插件】![https://github.com/liriliri/eruda-touches](https://img.shields.io/npm/v/eruda-touches/latest.svg?label=eruda-touches) 可视化屏幕 Touch 事件触发
- 【插件】![https://github.com/pomelo-chuan/eruda-outline-plugin](https://img.shields.io/npm/v/eruda-outline-plugin/latest.svg?label=eruda-outline-plugin) 给页面的元素添加边框
- 【插件】![https://github.com/Faithree/eruda-pixel](https://img.shields.io/npm/v/eruda-pixel/latest.svg?label=eruda-pixel) 这是一个高精度的UI恢复辅助工具，致力于让前端开发人员头疼和崩溃。设计师检查工具。

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

- chrome插件 - [Disable Content-Security-Policy](https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden/)
- edge插件 - [Disable Content-Security-Policy](https://microsoftedge.microsoft.com/addons/detail/disable-contentsecurity/ecmfamimnofkleckfamjbphegacljmbp?hl=zh-CN)
- firefox - 在`about:config`菜单配置中，禁用`security.csp.enable`

## VConsole

- 最新版本：[![npm version](https://img.shields.io/npm/v/vconsole/latest.svg?label=vConsole)](https://www.npmjs.com/package/vconsole)
- 当前版本：`3.15.1`
- 项目主页<br>[https://github.com/Tencent/vConsole](https://github.com/Tencent/vConsole)
- 项目最新地址<br>[https://cdn.jsdelivr.net/npm/vconsole](https://cdn.jsdelivr.net/npm/vconsole)<br>[https://fastly.jsdelivr.net/npm/vconsole](https://fastly.jsdelivr.net/npm/vconsole)<br>[https://testingcf.jsdelivr.net/npm/vconsole](https://testingcf.jsdelivr.net/npm/vconsole)
- 【插件】[vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats): A vConsole plugin which can show Stats in front-end.
- 【插件】[vconsole-outputlog-plugin](https://github.com/sunlanda/vconsole-outputlog-plugin): 使用该插件可以复制或下载console中打印的log
- 【插件】![https://github.com/Zippowxk/vue-vconsole-devtools](https://img.shields.io/npm/v/vue-vconsole-devtools/latest.svg?label=vue-vconsole-devtools) Vue-vConsole-devtools 是一款vConsole插件，把Vue.js官方调试工具vue-devtools移植到移动端，可以直接在移动端查看调试Vue.js应用

## PageSpy

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

- 最新版本：[![npm version](https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=page-spy-browser)](https://www.npmjs.com/package/@huolala-tech/page-spy-browser)
- 当前版本：`2.2.10`
- 项目主页<br>[https://github.com/HuolalaTech/page-spy-web](https://github.com/HuolalaTech/page-spy-web)
- SDK地址<br>[https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-browser](https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-browser)
- 项目最新地址<br>[https://cdn.jsdelivr.net/npm/@huolala-tech/page-spy-browser](https://cdn.jsdelivr.net/npm/@huolala-tech/page-spy-browser)<br>[https://fastly.jsdelivr.net/npm/@huolala-tech/page-spy-browser](https://fastly.jsdelivr.net/npm/@huolala-tech/page-spy-browser)<br>[https://testingcf.jsdelivr.net/npm/@huolala-tech/page-spy-browser](https://testingcf.jsdelivr.net/npm/@huolala-tech/page-spy-browser)

## Chii

- 项目主页<br>[https://github.com/liriliri/chii/blob/master/README_CN.md](https://github.com/liriliri/chii/blob/master/README_CN.md)
- 调试示例页面(demo)<br>[https://chii.liriliri.io/](https://chii.liriliri.io/)

## 赞赏支持

<img src="https://fastly.jsdelivr.net/gh/WhiteSevs/TamperMonkeyScript/asset/img/wx_zsm.png" alt="微信赞赏" width="250" height="250">
<img src="https://fastly.jsdelivr.net/gh/WhiteSevs/TamperMonkeyScript/asset/img/zfb_skm.png" alt="支付宝赞赏" width="250" height="250">