阅读本文之前建议先看一遍移动前端开发调试。上文中详细介绍了通过Safari 进行iOS 上H5 页面的模拟器和真机调试,能解决大部分的调试场景。但是Google 给我们提供了另一种方式——[ios-webkit-debug-proxy。
为什么要用ios-webkit-debug-proxy
1、 iOS 上的H5 只能使用Safari调试,之前一直用Chrome,Safari 的调试功能太难用- 如果你在UIWebView中注入一段js,Safari 并不能看到。[WebViewJavascriptBridge](https://github.com/marcuswestin/WebViewJavascriptBridge) 就是在webview 中注入了jsbridge。
2、 使用Linux 作为开发机的朋友。 注意,通过企业证书In house发布的测试客户端还是不能调试,所以对于大企业的很多人来说,证书问题一直都是问题。
3、 自动化测试相关的目的,搜索ios-webkit-debug-proxy 看看是不是你想要的。
4、 ......
使用
项目的README 中有详细介绍。我只说下mac 下的使用
安装
brew install ios-webkit-debug-proxy
Start the proxy
提前打开模拟器,用USB连接真机。
// -f 参数直接指定使用chrome的devtools作前端。
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
在Chrome中打开页面
chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1
这里有个坑点是,没法像Safari 一样,直接选择打开哪一个页面调试,而是通过上面链接最后的page/1确定。
现在浏览器输入:http://127.0.0.1:9222 ,然后看排序,先手动改吧。
此时就能愉快的调试页面了。
如果到此没有成功,请查看README, 我只是想说明有这个东西的存在,并且能解决一部分问题而已。