如何在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)

在這裏，你能夠進行信息的打印以及命令的執行等等。