如何在IOS上调试Hybrid应用

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

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

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

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

系统要求

  • 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(图中第二步)

mac-safari

2. 点击偏好设置(Preferences)

preferences

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

open-options

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

safari-develop

设备上的Safari配置

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

1. 点击设置,找到Safari

phone-safari

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

phone-advanced

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

phone-inspector

在设备上运行项目

当咱们配置好了以上的设置,而后就须要把APP的源码down下来,咱们就能够在咱们的设备上运行项目了。网络

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

xcode-run-project

2. 若是程序在你的手机上正常打开了,就能够打开电脑上的safari,而后点击“开发”【Developer】选项

debug-safari

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

debug-inspector

开发工具解析

网络(Network)

debug-network

资源(Resources)

这个部分会列举全部在App上的资源,你能够浏览它们app

debug-resources

时间轴(Timelines)

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

debug-timeline

调试器(Debugger)

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

debug-debugger

本地存储(Storage)

debug-storage

控制台(Console)

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

debug-console