思路：

搜索一下 ?hubilder ?xcode ?真機調試

Mac里需要裝xcode

注意xcode版本 ?和huilder版本

出問題可能是xcode和hbuilder版本問題
Google下即可
?

?

HBuilder對前端代碼的調試方式有邊改邊看、真機運行、webkit remote debug真機調試3種。

系列文章目錄導航：

• 調試方式介紹一 邊改邊看
• 調試方式介紹二 真機運行
• 調試方式介紹三 webkit remote debug之Chrome調試Android手機
• [調試方式介紹四 webkit remote debug之Safari調試iOS手機]

Safari調試iOS手機概述

對于HTML5的開發，大家都知道Chrome的DevTools工具有強大的功能和友好的用戶體驗，不僅能快速方便調試JavaScript、檢查HTML頁面DOM結構、實時同步更新元素CSS樣式，還能跟蹤分析頁面資源加載性能等問題。
對于移動平臺的開發者來說，從iOS5.0開始，也可以通過Safari的Web Inspector工具連接設備對應用進行調試。

調試效果如圖所示：

我們有2種方式，一種是使用xcode iOS模擬器，一種是使用iPhone、iPad、iTouch等真實設備。
如果使用xcode模擬器，可以直接使用safari的控制臺debug。
如果使用真機，由于iOS有簽名校驗機制，正式包不允許safari debug，所以安裝在真機上的包必須是測試簽名打的包。此時參考如下步驟：

真機調試環境

準備環境

• Mac OS 10.9以上系統。無論使用模擬器還是真機，由于safari只有mac版本，所以必須配備mac電腦。
• xcode iOS模擬器
• 如果使用真實手機debug，還需要：
• 蘋果開發者賬號，申請蘋果開發證書（Certificates）和描述文件（Provisoning Profiles）
• iOS5.0以上設備（iPhone、iPad、iTouch均可）

申請開發證書和描述文件

參考iOS證書(.p12)和描述文件(.mobileprovision)申請

使用HBuilder App云端打包獲取調試安裝包

在HBuilder中選中要調試的應用，在菜單中選擇“發行”->“App打包”，打開“App云端打包”界面：

• AppID：蘋果開發者中心申請的應用標識，必須與申請描述文件時選擇的一致
• 私鑰證書：蘋果開發者中心申請的Development證書，必須是p12格式證書
• 私鑰密碼：導入蘋果開發者證書的密碼，在導出成p12證書時設置
• pfofile文件：蘋果開發者中心申請的描述文件

提交App云端打包成功后可獲取ipa安裝包：

開啟iOS設備的調試功能

打開“設置”程序，進入“Safari”->“高級”頁面開啟“Web檢查器”：

模擬器調試環境

使用模擬器調測更為方便。

準備環境

• Mac OS 10.9以上系統
• XCode6.0以上程序

安裝XCode程序

在Safari中打開XCode下載頁面
可以選擇通過App Store，按提示一步步安裝：

或者可以下載Beta版本dmg文件，在Finder中雙擊dmg文件按提示一步步安裝：

HBuilder中啟動模擬器運行

使用Safari調試

打開“開發者”菜單

運行Safari,點擊“Safari”菜單下面的“偏好設置（Preferences...）”，切換到“高級選項（Advanced）”：

真機設備連接調試

如果是真機點擊“開發（Develop）”彈出菜單會出現設備名稱項，進入后顯示設備上所有打開的“HTML頁面”列表：

Web Inspector調試

打開Web Inspector界面后，即可調試JavaScript、檢查HTML頁面DOM結構、實時同步更新元素CSS樣式等操作：

?

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的Safari调试iOS应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。