在真機和模擬器中使用 devtools 調試（iOS Web版）

開發 Web 頁面時，不免會碰到一些特定機型、特定版本或者是嵌到 App 中才會出現的問題。碰到這類問題時，若是不能使用開發者工具 devtools，這意味着，你只能使用 alert 或者 window.onerror 等手段。

谷歌和蘋果分別提供了各自方案，來幫助開發者使用開發者工具 devtools 調試真機或模式器的 Web 頁面。這極大的提升了調試效率。本文介紹了蘋果提供的在真機和模擬器中使用 devtools 調試方法。

真機調試

一 準備

1. 須要一臺 Mac。
2. 須要一臺在測試序列號中的 iPhone 手機。
3. hybrid 調試須要 iOS 同窗幫忙安裝一個測試版的 App。

二 開啓 Safari Web 檢查器的權限

1. 打開設置
2. 依次進入 Safari > 高級
3. 開啓 Web 檢查器

三 開啓顯示 Safari 開發菜單

1. 打開 Safari
2. 依次點開 Safari 菜單 > 偏好設置 > 高級
3. 開啓 在菜單欄中顯示「開發」菜單
4. 這時就能夠在 Safari 的菜單欄中看到 開發 選項了

四 使用 USB 鏈接 iPhone 和 Mac

五 打開App，進入頁面

六 開啓頁面調試

1. 打開 Safari
2. 依次點開 開發 > 某某的 Macbook > 具體頁面

模擬器中調試

一 準備

1. 須要一臺 Mac。
2. 須要下載 Xcode 和 iOS Simulator。
3. hybrid 調試須要一個能在模擬器中安裝的 App。

二 打開 Simulator

1. 使用快捷鍵 command + 空格，打開 Spotlight
2. 輸入 Simulator，並按回車打開。

三 打開App，進入頁面

四 開啓頁面調試

1. 打開 Safari
2. 依次點開 開發 > Simulator > 具體頁面

注意事項： 必須先打開 Simulator，再打開 Safari。否則 Safari 檢查不到 Simulator。