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