如何用Safari联调Hybrid APP

简介: 要想使用Safari来调试,你要做的有三步:

随着Hybrid APP的流行,对其调试变得必不可少。使用Xcode我们能看到的仅仅是WebView,要想进一步查看里面的a标签、button和其他元素,Xcode是心有余而力不足。但是不用担心,Safari的调试功能能够弥补Xcode的不足,让你能够更方便地调试此类APP。要想使用Safari来调试,你要做的有三步:

  1. 配置Safari。
  2. 配置iPhone
  3. 开始调试

接下来就详细对此功能进行解释。

1.配置Safari

打开Safari,查看菜单栏里面是否有“开发”这个菜单,如果有,你的Safari就已经配置好了。如果没有,你要做的操作就是:打开Safari的偏好设置,然后设置高级选项里面选中“在菜单栏中显示开发菜单”。具体看图:
Safari偏好设置
设置完成。

2.配置iPhone

打开系统设置,然后找到Safari 浏览器,点击高级选项,然后打开“JavaScript”和“Web检查器”即可。具体看图:
手机对Safari App的设置
到此,iPhone配置成功。

3.开始调试

设置好前两个步骤后,将手机和电脑使用数据线连接。打开电脑上Safari,然后打开开发菜单,你就会看到你的手机(和你的电脑名称挨着)。此时打开你的Hybrid APP,你就可以调试你的APP了。如图:
Safari查看App加载网页
点击你要调试的网页域名,即可弹出调试页面,这个页面的具体功能就自己摸索吧,和网页开发时调试页面差不多。如下图:
查看某个页面
到此,你就完成了如何使用Safari进行调试。

几点需要知道的

  1. 根据测试,手机端的Safari可以直接连接到电脑上查看加载网页的代码。开发过程中的Hybrid APP也可以通过此方式查看。已经上线的Hybrid APP无法通过此种方式查看。所以在要想通过此方式调试,一定要用Debug包进行调试。
  2. 如果在Safari开发菜单中看不到你的手机,那就看看步骤二是否正确配置。

总结

随着H5和CSS3的进一步发展,Hybrid APP变得更加火爆,具有Native APP的良好交互,又有Web APP跨平台开发的优势,而且需求更新版本不必每次都更新APP。
在未来,你看到的手机端APP不一定就是原生的,而是Web,更让人疯狂的是你还无法分辨是否是原生还是Web。
所以,移动开发的小伙伴,为了你的未来,多学学前端也是很有必要的。

相关文章
|
6月前
|
SQL 网络协议 数据库连接
【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法
【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法
|
编解码 移动开发 JavaScript
开发Hybrid App的技术选型
开发Hybrid App的技术选型
329 0
|
移动开发 前端开发 Java
移动端开发必备知识-Hybrid App
开发必备知识-Hybrid App
672 0
|
移动开发 小程序 JavaScript
Hybrid app本地开发如何调用JSBridge
Hybrid app本地开发如何调用JSBridge
213 0
Hybrid app本地开发如何调用JSBridge
|
Web App开发 XML 移动开发
Hybrid App 应用 开发中 9 个必备知识点复习(WebView / 调试 等) 下
Hybrid App 应用 开发中 9 个必备知识点复习(WebView / 调试 等) 下
566 0
|
存储 移动开发 缓存
Hybrid App 应用 开发中 9 个必备知识点复习(WebView / 调试 等) 上
Hybrid App 应用 开发中 9 个必备知识点复习(WebView / 调试 等) 上
392 0
|
移动开发 JavaScript 前端开发
Hybrid App 应用开发中 5 个必备知识点复习 下
Hybrid App 应用开发中 5 个必备知识点复习 下
326 0
|
Web App开发 移动开发 JavaScript
Hybrid App 应用开发中 5 个必备知识点复习 上
Hybrid App 应用开发中 5 个必备知识点复习 上
309 0

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    微信小程序 app.json 配置文件解析与应用
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作