在Windows笔记本上调试运行在iOS设备上的前端应用

阅读更多

我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作，比如iOS设备和Android设备。我用的工作笔记本电脑又是Lenovo的，安装的是Windows操作系统。

 

有的时候一个开发好的前端应用，在Android设备上正常工作，但是在iOS平板上测试却发现问题（相当广大前端开发者都曾经遇到过类似问题）。顺手就想调试一下找到原因。那么一个前端应用运行在iOS设备上，程序员如何在安装了Windows系统的笔记本上进行调试呢？

 

假设我的前端应用是这个url：https://jerrylist.cfapps.eu10.hana.ondemand.com/ui5/。

在IPAD上打开界面如下：

 

1. 在Windows笔记本电脑上安装iTunes： https://www.apple.com/cn/itunes/download/

安装后，您的Windows笔记本电脑才能成功和iOS设备连接并成功识别它。

2. 到iOS设备上，菜单iPad->Settings->Safari->Advanced，打开“Web Inspector” 选项。

 

3. 从github网站下载ios-webkit-debug-proxy-win32：

https://github.com/artygus/ios-webkit-debug-proxy-win32

将zip解压到一个文件夹里，然后把这个文件夹加到Path环境变量里。

 

4. 在Windows系统的CMD里，敲入下面的命令行：

ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html

收到Windows成功监听iOS设备事件的消息：

Listing devices on: 9221

Connected: 9222 to Jerry's iPad

 

在浏览器里访问：http://localhost:9221

从结果列表里就看到我的iOS设备了。

 

点localhost:9222的超链接，然后就可以看到另一个超链接，代表了我的IPad的Safari当前打开的网页：

 

点这个超链接，Windows笔记本电脑上的Chrome开发者工具就自动打开了。在IPad上会弹出一个询问您是否允许调试的对话框。点“Approve”按钮，就可以开始在Windows电脑上调试远端连接的iOS设备上的前端应用啦！

 

 

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: