如何在IOS上调试Hybrid应用

最近在找关于在xcode上调试Hybrid应用的方法,比如我想进行断点调试、日志打印已经屏幕适配等等,刻意去搜了下方法,虽然之前已经大致知道了,这里系统归纳一下,原文在https://developers.redhat.com/blog/2017/07/12/how-to-debug-your-mobile-hybrid-app-on-ios/,配图还是用的文中的配图,这里只是翻译一下。

正如你所知,有时候在一个手机设备上调试程序是一件非常困难的事。对于Android和网页应用来说,我们有Chrome Developer tools,这也是我们通用的方式,那么对于IOS来说,我们也有相似的方式,那就是Safari Web insepctor

随着IOS 6和 Safari 6的发行,苹果也发布了网页检查器来调试和创建网页,这就意味着我们可以在我们的电脑上看到我们手机中运行的程序到底是在怎么进行的,并且对其进行调试,下面就让我来详细地解析一下整个环境的搭建。

提示:你得先有一台Mac电脑。

系统要求

  • MacOSX Lion version 10.7.4 or greater
  • Certified USB Cable
  • Safari 6
  • Device / Emulator
  • XCode 4.5 or later with iOS 6 SDK or later

开启开发者选项

电脑上的Safari配置

1. 打开Safari(图中第一步)然后点击左上角工具栏中的Safari(图中第二步)

2. 点击偏好设置(Preferences)

3. 点击高级【Advanced】(图中第1步),然后开启勾选在菜单栏中开启”开发”选项【Show Develop menu in menu bar】(图中第2步)

4. 关闭窗口,你就可以在safari的工具条上看到“开发”【Develop】这个选项了

设备上的Safari配置

要想你的手机被调试,你还需要在手机上进行如下几步设置。

1. 点击设置,找到Safari

2. 点击进入,向下滑动直到找到高级选项【Advanced】

3. 开启检查器开关【Web Inspector】

在设备上运行项目

当我们配置好了以上的设置,然后就需要把APP的源码down下来,我们就可以在我们的设备上运行项目了。

1. 使用USB连接电脑,打开xcode,运行项目

2. 如果程序在你的手机上正常打开了,就可以打开电脑上的safari,然后点击“开发”【Developer】选项

3. 这就会在开发工具上新开一个窗口

开发工具解析

网络(Network)

资源(Resources)

这个部分会列举所有在App上的资源,你可以浏览它们

时间轴(Timelines)

你可以查看你的App加载、网络请求、布局渲染以及javascript事件执行总共花了多少时间。这在你对App有较高性能要求的时候会显得很有用处。

调试器(Debugger)

类似于Chrome的调试工具,在这里你也可以进行单步、断点调试。这里不在赘述,想了解更多可以自行Google

本地存储(Storage)

控制台(Console)

在这里,你可以进行信息的打印以及命令的执行等等。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android群英传

PWA程序实践

10320
来自专栏生信技能树

点击此文,无需转发,即可下载上千个免费R包

写在前面: 谨以此文献给那些“奋斗”在转发送别人资源,为了博人眼球,而践踏别人的辛勤的劳动成果的公众号们。 当然了,R包本来就是免费的,你只是不会下载而已,所以...

44380
来自专栏挖坑填坑

(翻译)开始使用ABP.CORE模板 (ASP.NET Core with Angular)

开始一个新使用Angular和 ASP.NET Core 的ABP项目最简单的方法就是通过官方的模板页面来生成模板。切记包含zero模块。在官网完成创建和下载你...

26320
来自专栏西安-晁州

Xss和Csrf介绍

Xss和Csrf介绍 Xss Xss(跨站脚本攻击),全称Cross Site Scripting,恶意攻击者向web页面中植入恶意js代码,当用户浏览到该页时...

38090
来自专栏北京马哥教育

18个网站优化技巧

18个网站优化技巧 快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。 ?   ...

49680
来自专栏小白课代表

Autodesk 3DS MAX 2019安装教程

3D Studio Max,常简称为3d Max或3dsMAX,是Discreet公司开发的(后被Autodesk公司合并)基于PC系统的三维动画渲染和制作软件...

20520
来自专栏不二小段

【爬虫军火库】AnyProxy安装使用【Windows】

分析网络请求详情是写爬虫应用的初始步骤,抓包便是一种十分强大的分析手段,尤其是对手机App进行抓包,往往能收获到Web端没有的API接口。抓包的工具多种多样,功...

2.2K60
来自专栏小白课代表

Autodesk 3DS MAX 2018安装教程

3D Studio Max,常简称为3d Max或3dsMAX,是Discreet公司开发的(后被Autodesk公司合并)基于PC系统的三维动画渲染和制作软件...

19730
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(上)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

20210
来自专栏前端黑板报

构建离线web应用(二)

本文由哔哩哔哩前端工程师 墨白 翻译分享 上一篇文章中,我们成功尝试使用 service workers。我们也可以在应用中缓存一些资源。这篇文章我们准备了解这...

22780

扫码关注云+社区

领取腾讯云代金券