如何在 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 裝置要做的設定

  1. 將 iOS 裝置插上數據/電源線,如果此步驟詢問是否信任此裝置,要選擇信任
    • 千萬別拔掉數據/電源線,要除錯 iOS 裝置裡的網頁一定要插著線
  2. 打開 iOS 裝置裡的 Chrome, 進入 [設定] > [內容設定] ,將 [網頁檢閱器] 設定為 開啟
    • chrome_1.png
    • chrome_2.png
    • chrome_3.png
    • chrome_4.png
  3. 打開 iOS 裝置的 [設定] ,在上方搜尋框輸入 Safari 後,選擇 Safari ,選擇畫面最下方的 [進階] ,將 [網頁檢閱器] 設定為開啟,Safari 也需要做這設定才能開啟除錯模式
    • settings_1.png
    • settings_2.png
    • settings_3.png
    • settings_4.png
  4. 重新啟動 iOS 裝置裡的 Chrome 以確保設定生效
  5. 用 iOS 裝置裡的 Chrome 打開想除錯的網頁,也不要縮小視窗,請保持它在畫面

macOS 裝置要做的設定

  1. 打開 macOS 裡的 Safari, 按快捷鍵 Command + , 進入 Safari 設定,選擇 [Advanced] 並勾選 [Show Developer menu in menu bar] ,成功之後可以在 Safari 的選單列看到 [Develop] 的選單
    • macOS_safari.png
    • macOS_safari_menu_bar.png
  2. 點選 Safari 選單列的 [Develop] , 成功的話將可以看見你的 iOS 裝置名稱出現在選單上,選擇該 iOS 裝置之後,還可以看到該 iOS 裝置裡的 Chrome 正在瀏覽哪些網頁,選擇你要除錯的網頁就會跳出網頁檢閱器,這個網頁檢閱器跟 Chrome DevTools 大同小異,不難上手。
    • macOS_safari_devices.png
    • macOS_safari_websites.png
    • macOS_safari_devtool.png
  3. 開始你的除錯之旅吧!

總結

本文提供如何在 macOS 為 iOS 裝置裡的瀏覽器網頁除錯的設定,適合手邊有 iOS 手持裝置的開發者使用,不過現代手持裝置多不勝數,一個開發團隊也不可能羅列市面上所有的手持裝置進行測試,因此多半只會準備近幾代知名廠牌的主流機型作為測試標準,但如果想盡可能地測試多種手持裝置,或者不想投注經費在購買手持裝置,也可以考慮使用 BrowserStackLambdaTest 等線上服務,這些服務都有提供各種手持裝置線上測試、除錯的功能,相信也是一種不錯的選擇!

References

Debugging websites in Chrome on iOS 16.4+ - Chrome for Developers

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!