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

本篇文章为大家展示了怎么在Windows笔记本上调试运行在iOS设备上的前端应用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

成都创新互联公司从2013年开始,先为奉化等服务建站,奉化等地企业,进行企业商务咨询服务。为奉化企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

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

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

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

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

在IPAD上打开界面如下:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上述内容就是怎么在Windows笔记本上调试运行在iOS设备上的前端应用,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


当前名称:怎么在Windows笔记本上调试运行在iOS设备上的前端应用
当前URL:http://azwzsj.com/article/pcgoeo.html