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

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

创新互联是网站建设专家,致力于互联网品牌建设与网络营销,专业领域包括成都网站建设、成都网站设计、电商网站制作开发、小程序设计、微信营销、系统平台开发,与其他网站设计及系统开发公司不同,我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供全方位的互联网品牌整合方案!

我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如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设备上的前端应用-创新互联
标题路径:http://scyanting.com/article/djihph.html