如何在 iOS 版 Safari 上使用 Web Inspector

網站並不總是從桌面系統訪問。移動設備也有瀏覽器，它們用於訪問網站的頻率與在台式機上一樣多，甚至更多。在極少數情況下，熱門網站會有移動應用程序，但大多數網站都沒有。這就是為什麼網站需要在桌面瀏覽器和移動瀏覽器上合理運行的原因。為了確保他們這樣做，網站需要在移動網絡瀏覽器上的開發過程中進行調試，這就是您遇到問題的地方，因為它們沒有像桌面瀏覽器那樣的控制台。

需要在 Android 上訪問用於移動 Chrome 的控制台嗎？查看我們的指南。

Safari 上的 Web Inspector

如果您在 iOS 上的 Safari 上調試網站，則可以使用 Safari 的內置網絡檢查器。唯一的限制是你需要有一台 Mac。移動 Safari 上的 Web 控制台可通過 Mac 上的 Safari 訪問。設置它需要一段時間。

iCloud 帳戶

為了在 Safari 上使用網絡檢查器，iOS 設備和 Mac 必須使用相同的 iCloud 帳戶並設置為同步 Safari。

蘋果系統

1. 打開系統偏好設置。
2. 轉到Apple ID（記下正在使用的 ID）。
3. 在左側欄中選擇iCloud，並確保在右側窗格中啟用了Safari。
4. 打開Safari。
5. 單擊菜單欄中的 Safari 並選擇Preferences。
6. 在Safari 的首選項 中，轉到高級選項卡。
7. 啟用“在菜單欄中顯示開髮菜單”。

IOS

1. 打開設置應用程序。
2. 在頂部點按您的帳戶。
3. 確保使用的Apple ID 與 Mac 上使用的Apple ID 相同。
4. 輕點“ iCloud”。
5. 為 Safari啟用iCloud。
6. 返回主設置應用程序屏幕。
7. 轉到“常規”並滾動到底部。
8. 轉到重置>重置位置和隱私。

啟用網絡檢查器

您現在已準備好將 iOS 設備連接到 Mac。

1. 使用數據線，連接iPhone（或iPad）到Mac。
2. 在你的 iPhone 上，你會看到一個提示，詢問它所連接的計算機是否應該被信任。點擊信任，然後輸入您設備的密碼。
3. 在 iPhone 上打開 Safari 並訪問您要調試的網站。
4. 在 Mac 上，打開 Safari並轉到Develop。您的 iPhone應該會出現在子菜單中。選擇它，然後選擇要調試的網站。它將顯示在子菜單中。
5. 將打開一個帶有Web 檢查器的新窗口。

故障排除

在某些情況下，上述方法可能不起作用。這是 macOS 的一個錯誤。在幾乎所有情況下都有效的一件事是下面的修復，但是在您按照上一節中的步驟操作後執行以下操作。

1. 斷開 iPhone與 Mac 的連接。
2. 在 iPhone 上打開設置應用程序。
3. 轉到常規>重置>重置位置和隱私。
4. 在iPhone 上，關閉 WiFi，打開藍牙，然後打開移動熱點。
5. 將 iPhone 連接到 Mac。在 iPhone 上提示時信任計算機。
6. 在 iPhone 上打開Safari，然後訪問您要調試的網站。
7. 在Mac 上，打開 Safari。
8. 轉到Develop>Your iPhone>Connect via Network。
9. 接下來，轉到開發>您的 iPhone>選擇在 iPhone 上的 Safari 中打開的網站。

結論

在 iOS 版 Safari 中調試網站只能在您擁有 Mac 的情況下完成。您需要確保 iOS 上的 Safari 版本與 Mac 上的相同。一個好的經驗法則是在調試網站時始終運行最新的穩定版本的 iOS 和 macOS。這將確保兩個平台上的 Safari 版本相同。