在win10+chrome环境中调试ios-safari画面

手头上有个调试Echarts地图在ios端显示情况的任务,工作电脑是win10,因此在这里,找到了方法。

1 下载iTunes

官网下载iTunes。才能识别连接的ios设备。

2 开启调试模式

在ios端打开设置->Safari->高级->Web检查器

3 ios-webkit-debug-proxy

这里就是核心了。按照原博说法,ios-webkit-debug-proxy 是一个 DevTools proxy ,项目托管在 Github 上。其使得开发者可以发送命令到真实(或虚拟)IOS设备中的 Safari 浏览器或 UIWebViews 。

项目地址:https://github.com/artygus/ios-webkit-debug-proxy-win32

与原博相比,git上有一些更新:
在Binaries小节点击x64 Build下载。下载后解压缩,并将解压目录添加到环境变量。

4 启动proxy

  1. 在控制台执行:
ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html
  1. 结果

Listing devices on :9221
Connected :9222 to iPad (3350272cc4155cd76e1990b18ad7a5a28689****)

说明启动成功

5 开始调试

  1. 在chrome浏览器地址栏输入:http://localhost:9221/
    会显示所有设备清单:

iOS Devices:
localhost:9222 - iPad

  1. 点击打开
    可以发现地址栏变为:http://localhost:9222/
    同时显示该ios设备中Safari浏览器打开的所有页面,和一个提示:

Inspectable pages for iPad:
http://********

Note: Your browser may block(https://code.google.com/p/chromium/issues/detail?id=87815)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调试接口

6 缺点

  1. 发现console输出无效。

推荐阅读更多精彩内容