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

我在天天工做中须要在不一样的移动设备上测试咱们开发的前端应用是否正常工做,好比iOS设备和Android设备。我用的工做笔记本电脑又是Lenovo的,安装的是Windows操做系统。html

有的时候一个开发好的前端应用,在Android设备上正常工做,可是在iOS平板上测试却发现问题(至关广大前端开发者都曾经遇到过相似问题)。顺手就想调试一下找到缘由。那么一个前端应用运行在iOS设备上,程序员如何在安装了Windows系统的笔记本上进行调试呢?前端

假设个人前端应用是这个url:https://jerrylist.cfapps.eu10...ios

在IPAD上打开界面以下:git

1. 在Windows笔记本电脑上安装iTunes: https://www.apple.com/cn/itun...程序员

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

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

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

https://github.com/artygus/io...浏览器

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

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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码: