最近遇到了很多移动端调试h5页面的坑，总结一下

安卓端调试h5

一般情况下

1. 安卓的包需要是开启webview调试

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

2. 安卓设备需要打开开发者模式-运行远程调试
3. chrome浏览器打开 chrome://inspect, 勾选 usb调试 （Enable USB Debuggin）
4. 如果打开白屏或者404需要等一会儿，让chrome下载对应移动端设备的dev-tools（可能需要翻墙）

特殊情况下

比如调试线上环境的包或者其他没有开启调试的包

1. 和上面一般情况一样设置设备和chrome
2. 安装 Xposed（root情况下）或者 [VirtualXposed]
3. 在 Xposed 中安装 [WebViewDebugHook][[WebViewDebugHook]]
4. 在 Xposed 中安装 要调试的包
5. 在 Xposed 模块管理启用 WebViewDebugHook, 然后重启一下 Xposed
6. 现在可以连接设备， 打开h5页面 进行调试了

iOS 端调试h5

一般情况下

1. iOS包要安装在手机上，需要是真机调试的包或者说是开发证书打的包，或者只是在模拟器上运行
2. 连接手机，打开电脑上 safari-菜单-开发-对应的设备-对应的页面。如果没有看到开发菜单，需要在safari的首选项-高级中，勾选“在菜单栏中线上 开发 菜单”
3. safari的调试工具不好用的话，可以试试 ios-webkit-debug-proxy

特殊情况下

比如调试线上环境的包或者其他没有开启调试的包

• 越狱环境: 直接安装 [GlobalWebInspect], 重启要调试的应用，就能在 safari 中看见了
• 非越狱环境: MonkeyDev 砸壳、重打包

参考资料

• [VirtualXposed]
• [Xposed]
• [WebViewDebugHook]
• [GlobalWebInspect]
• [ios-webkit-debug-proxy]
• [iOS：Safari或Chrome调试Webview]