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

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

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

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

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

在IPAD上打开界面如下:

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


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


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

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

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

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

image.png4. 在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

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

从结果列表里就看到我的iOS设备了。image.png点localhost:9222的超链接,然后就可以看到另一个超链接,代表了我的IPad的Safari当前打开的网页:image.png点这个超链接,Windows笔记本电脑上的Chrome开发者工具就自动打开了。在IPad上会弹出一个询问您是否允许调试的对话框。点“Approve”按钮,就可以开始在Windows电脑上调试远端连接的iOS设备上的前端应用啦!image.png


相关文章
|
6天前
|
Windows Python
python获取windows机子上运行的程序名称
python获取windows机子上运行的程序名称
|
6天前
|
小程序 Windows
MASM32编写的程序在Windows 7,10下运行正常,但在Win XP下运行时只闻其声不见其形的故障
MASM32编写的程序在Windows 7,10下运行正常,但在Win XP下运行时只闻其声不见其形的故障
|
2月前
|
Unix Linux Ruby
在windows和linux上高效快捷地发布Dash应用
在windows和linux上高效快捷地发布Dash应用
|
2月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
36 0
|
2月前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
34 0
|
2月前
|
C# Windows 监控
WPF应用跨界成长秘籍:深度揭秘如何与Windows服务完美交互,扩展功能无界限!
【8月更文挑战第31天】WPF(Windows Presentation Foundation)是 .NET 框架下的图形界面技术,具有丰富的界面设计和灵活的客户端功能。在某些场景下,WPF 应用需与 Windows 服务交互以实现后台任务处理、系统监控等功能。本文探讨了两者交互的方法,并通过示例代码展示了如何扩展 WPF 应用的功能。首先介绍了 Windows 服务的基础知识,然后阐述了创建 Windows 服务、设计通信接口及 WPF 客户端调用服务的具体步骤。通过合理的交互设计,WPF 应用可获得更强的后台处理能力和系统级操作权限,提升应用的整体性能。
65 0
|
2月前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
33 0
|
2月前
|
前端开发 UED 开发者
React组件优化全攻略:深度解析让你的前端应用飞速运行的秘诀——从PureComponent到React.memo的彻底性能比较
【8月更文挑战第31天】在构建现代Web应用时,性能是提升用户体验的关键因素。React作为主流前端库,其组件优化尤为重要。本文深入探讨了React组件优化策略,包括使用`PureComponent`、`React.memo`及避免不必要的渲染等方法,帮助开发者显著提升应用性能。通过实践案例对比优化前后效果,不仅提高了页面渲染速度,还增强了用户体验。优化React组件是每个开发者必须关注的重点。
47 0
|
1月前
|
网络安全 虚拟化 Windows
windows 11安装openSSH server 遇到的"kex_exchange_identification: read: Connection reset"问题
windows 11安装openSSH server 遇到的"kex_exchange_identification: read: Connection reset"问题
|
2月前
|
PHP Windows
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
下一篇
无影云桌面