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

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

2018-08-24 549

我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作，比如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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

微信关注我们

原文链接：https://yq.aliyun.com/articles/629111

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Gradle 使用技巧(四) - 如何定位和解决依赖冲突

1. 前言随着业务的复杂度加深，我们免不了要引入许多的第三方开源库，也不可避免的会出现依赖冲突的错误。最常见的是V7、V4包之间的冲突。 2. 如何定位依赖冲突解决依赖冲突很简单，难得是如何去定位是引入的哪个库导致的依赖冲突。如果只想看结果的可以直接跳到最后。 2.1. 排除法排除法很简单，但是很耗时，就是选择一个依赖一个依赖的注释、编译、看结果。当然这也是最傻的办法，我们开发者怎么能做这种繁琐的工作呢？(说得我好像我自己没做过似的。。滑稽 ) 2.2. Gradle Task Android Studio虽然给我们提供了一个依赖树，但也只是一个总的平面图，并不是十分的直观。 Android Studio依赖树 External Libraries只给我们提供了一个依赖结果，并没有指出是哪个依赖依赖了什么东西。所幸，Gradle提供了一个task：androidDependencies，这个task能在命令行中显示依赖树之间的依赖关系。找到androidDependencies task，每一个module下面都有相应的androidDependencies。 task位...

2018-08-25

585

零、前言 [1]读写SD卡需要运行时权限。 [2]如果对运行时权限不清楚的童鞋，可以看一下我的封装：TI--安卓运行时权限完美封装一、使用：SD卡文件读写 FileHelper fileHelper = FileHelper.get(); //在SD卡追加模式创建：data/writeFile2SD.txt文件，写入"toly" fileHelper.writeFile2SD("data/writeFile2SD.txt", "toly", true); //在SD卡上创建一个空文件 fileHelper.createFile("create/create.txt"); //读取data/writeFile2SD.txt文件 String read = fileHelper.readFromSD("data/writeFile2SD.txt"); System.out.println(read);//tolytolytolytolytolytoly 二、创建文件判断是否存在SD卡 /** * 判断是否存在SD卡 * * @return 是否存在SD卡 */ private bool...

2018-08-26

506

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。