如何在 macOS 上為 iOS 裝置裡的瀏覽器網頁除錯(Debugging websites in Chrome on iOS)
Posted on Nov 19, 2023 by Amo Chen ‐ 3 min read
隨著各種手持智慧型裝置的盛行，一個網頁可能會在不同尺寸上的螢幕呈現，因此網頁設計勢必要考慮響應式設計(responsive design)，如不考慮響應式設計不僅容易造成使用者困擾之外，也可能會影響 SEO 分數，例如 Google 對有考量 mobile-first 設計的網站有加分。
雖然可以在瀏覽器的開發者工具調整螢幕尺寸，藉此查看網頁在不同裝置、螢幕尺寸的表現，不過最好還是實際在手持裝置內測試過會比較安心，因為我們無法保證手持裝置內的瀏覽器實作方式會跟其他平台一樣，這些差異就可能造成網頁的呈現不符預期。
但是要為手持裝置裡的瀏覽器網頁除錯，需要做一些設定才行，本文記錄如何在 macOS (例如 MacBook )上為 iOS 裝置(例如 iPhone ) 裡的瀏覽器網頁除錯(debugging)的設定過程。
本文環境
- macOS
- iPhone 12 Pro
- iOS 16.4 以上
- Chrome 115 以上
- Safari
如何為 iOS 裝置裡的網頁除錯(debugging)
在 macOS 為 iOS 裝置(iPhone, iPad 等)裡的網頁除錯需要在 iOS 裝置與 macOS 都做些設定才行，以下分為 iOS 要做的設定與 macOS 要做的設定 2 大部分。
iOS 裝置要做的設定
- 將 iOS 裝置插上數據/電源線，如果此步驟詢問是否信任此裝置，要選擇信任
- 千萬別拔掉數據/電源線，要除錯 iOS 裝置裡的網頁一定要插著線
- 打開 iOS 裝置裡的 Chrome, 進入
[設定]>[內容設定]，將[網頁檢閱器]設定為開啟 - 打開 iOS 裝置的
[設定]，在上方搜尋框輸入Safari後，選擇Safari，選擇畫面最下方的[進階]，將[網頁檢閱器]設定為開啟，Safari 也需要做這設定才能開啟除錯模式 - 重新啟動 iOS 裝置裡的 Chrome 以確保設定生效
- 用 iOS 裝置裡的 Chrome 打開想除錯的網頁，也不要縮小視窗，請保持它在畫面
macOS 裝置要做的設定
- 打開 macOS 裡的 Safari, 按快捷鍵
Command + ,進入 Safari 設定，選擇[Advanced]並勾選[Show Developer menu in menu bar]，成功之後可以在 Safari 的選單列看到[Develop]的選單 - 點選 Safari 選單列的
[Develop], 成功的話將可以看見你的 iOS 裝置名稱出現在選單上，選擇該 iOS 裝置之後，還可以看到該 iOS 裝置裡的 Chrome 正在瀏覽哪些網頁，選擇你要除錯的網頁就會跳出網頁檢閱器，這個網頁檢閱器跟 Chrome DevTools 大同小異，不難上手。 - 開始你的除錯之旅吧！
總結
本文提供如何在 macOS 為 iOS 裝置裡的瀏覽器網頁除錯的設定，適合手邊有 iOS 手持裝置的開發者使用，不過現代手持裝置多不勝數，一個開發團隊也不可能羅列市面上所有的手持裝置進行測試，因此多半只會準備近幾代知名廠牌的主流機型作為測試標準，但如果想盡可能地測試多種手持裝置，或者不想投注經費在購買手持裝置，也可以考慮使用 BrowserStack 或 LambdaTest 等線上服務，這些服務都有提供各種手持裝置線上測試、除錯的功能，相信也是一種不錯的選擇！
References
Debugging websites in Chrome on iOS 16.4+ - Chrome for Developers
