iOS WebKit Debug Proxy的原理是在本地起了一个代理做WebInspector到WebKit远程调试的协议转发。ios_webkit_debug_proxy(以下简称iwdp)允许开发者通过Chrome DevTools UI和Chrome Remote Debugging Protocol来检查模拟器和真机上MobileSafari和UIWebview。
Mac安装
brew install ios-webkit-debug-proxy
如果顺利的话,你应该不会看到错误
我当时安装的版本是 1.6 。需要注意的是这个版本只是支持iOS9.x 的设备。
使用方法
模拟器一定要在iwdp之前启动,iwdp启动提供了三种方式(如下),一般选择第一种就好了
# Xcode changes these paths frequently, so doublecheck them
SDK_DIR="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs"
SIM_APP="/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator"
$SIM_APP -SimulateApplication $SDK_DIR/iPhoneSimulator8.4.sdk/Applications/MobileSafari.app/MobileSafari
模拟中的Safari也要开启inspector
通过Settings > Safari > Advanced > Web Inspector = ON 来开启
浏览和查看可以debug的tabs
在chrome浏览其中打开 location:9221 。 你将可以看到所有建立连接的设备。
如果连接正常的话,可以看到 location:9222 这样的列表,并且是可以点击的。 如果不能点击说明就没有连接成功
点击列表中的某个连接之后,可能会出现下面的提示:
**Note:** Your browser may block1,2
the above links with JavaScript console error:
Not allowed to load local resource: chrome-devtools://...
To open a link: right-click on the link (control-click on Mac), 'Copy Link Address', and paste it into address bar.
按照提示,右键复制“chrome-devtools://...”这样的连接,在新的chrome tab中打开,就可以愉快的debug。