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

liuyix 发布于2019-06-25 17:00 / 454人阅读

摘要：我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作，比如设备和设备。那么一个前端应用运行在设备上，程序员如何在安装了系统的笔记本上进行调试呢假设我的前端应用是这个。在上会弹出一个询问您是否允许调试的对话框。

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

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

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

在IPAD上打开界面如下：

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

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

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

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

https://github.com/artygus/io...

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

超融合服务器 idc机房托管图像识别在人脸识别上的应用在windows下运行webrtc webrtc在qt上的实现运行在哪里

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/17171.html

Xamarin 学习笔记

摘要：自此微软生成用开发的软件将不仅仅能够运行在上，而是可以在任何设备上运行。本文翻译自CodeProject文章：https://www.codeproject.com/Articles/1223980/Xamarin-Notes-Set-up-the-environment-Windows-and-I 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。...

keithxiaoy 2019-04-23 17:15 评论0 收藏0
开源八预言：桌面linux将死Hadoop要火

摘要：开源八大预言必亡要火安卓与一起占整个市场八成多占据全球智能手机操作系统市场超过一半的份额，是目前世界上更受欢迎的移动操作系统。开源八大预言必亡要火击败据市场研究公司称，年对于来说也许是迄今为止较好的一年。近两年，在IT圈中开源这个词已经变得越来越常见，人人开口闭口谈云计算OpenStack、大数据Hadoop、手机Android，开源Linux。开发者、运维人员和IT媒体们也开始关注Euc...

zhangke3016 2019-04-25 17:10 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

church 2019-08-02 16:18 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

xiao7cn 2019-08-26 13:47 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

邹立鹏 2019-08-30 10:56 评论0 收藏0