WebView Inspector 发布了！<50KB搞定环境检测+兼容性检测
继上一篇《移动端WebView调试的痛，只有做过的人才懂》后，工具做出来了！
还记得上一篇说的吗：
"如果反馈多，我就开源出来；如果没人要，我就当练手项目了"
我想了想，不管有没有人想要，总归是我自己的东西，所以——它来了！
WebView Inspector
专为 WebView 设计的轻量级调试工具，聚焦环境检测 + 兼容性检测，体积控制在 50KB 以内。
先看效果
环境检测
一键获取设备信息、系统版本、WebView类型/内核、微信版本、安全区尺寸：
兼容性检测
检测 30+ CSS 特性 和 56+ JS API 的支持情况：
错误捕获
捕获 JS 错误 + Promise rejection + 资源加载失败，附带完整堆栈：
核心功能
| 功能 | 说明 |
|---|---|
| 🔍 环境检测 | 设备型号、操作系统、浏览器、WebView内核、微信版本、安全区尺寸、屏幕信息 |
| 🧪 兼容性检测 | 30+ CSS特性 + 56+ JS API 支持情况检测，生成兼容性报告 |
| ⚠️ 错误捕获 | JS运行时错误 + Promise rejection + 资源加载失败，附带完整堆栈 |
| 🎨 UI面板 | 悬浮调试按钮、Tab切换、一键复制报告、深色/浅色主题 |
和其他工具对比
| 特性 | WebView Inspector | vConsole | Eruda |
|---|---|---|---|
| 体积 (gzip) | < 50KB | ~120KB | ~150KB |
| 零依赖 | ✅ | ❌ | ❌ |
| 环境检测 | ✅ 全面 | ✅ 基础 | ✅ 基础 |
| 兼容性检测 | ✅ 30+ CSS + 56+ JS | ❌ | ❌ |
| 错误捕获 | ✅ | ✅ | ✅ |
| Console面板 | ❌ | ✅ | ✅ |
| Network面板 | ❌ | ✅ | ✅ |
选择建议：
- 只要环境检测 + 兼容性检测 → WebView Inspector（轻量首选）
- 需要 Console + Network → vConsole
- 需要完整调试体验 → Eruda
快速开始
CDN 引入
<script src="https://cdn.jsdelivr.net/npm/webview-inspector/dist/webview-inspector.iife.js"></script>
<script>
WebViewInspector.init();
</script>
NPM 安装
npm install webview-inspector
import WebViewInspector from 'webview-inspector';
WebViewInspector.init();
一行代码，搞定！
使用场景
- 开发调试：快速获取设备环境信息，排查兼容性问题
- 线上监控：捕获用户端错误，一键复制堆栈信息反馈
- 兼容性排查：检测 WebView 支持的 CSS/JS 特性，提前规避风险
- 问题上报：用户反馈问题时，一键复制环境信息 + 兼容性报告
仓库地址
- Gitee: gitee.com/chenzs_46/W…
- NPM: www.npmjs.com/package/web…
欢迎 Star ⭐，欢迎提 Issue，欢迎 PR！
写在最后
作为一个被 WebView 折磨多年的移动前端开发，做这个工具的初衷很简单：
少问用户"什么手机"，多看工具"环境报告"
如果你也踩过 WebView 的坑，试试这个工具，说不定能省不少时间。
有问题评论区见！
后续我还会继续开发进阶功能，比如网络请求、输出控制台、性能监控、问题上报等等，敬请期待！
#WebView调试 #移动端H5 #前端工具 #开源项目
