如何在IOS上調試Hybrid應用

標籤：配置   使用   高效能   ima   串連   分享   ice   hone   mob   

最近在找關於在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)

在這裡，你可以進行資訊的列印以及命令的執行等等。

如何在IOS上調試Hybrid應用