行動開發-Mac 連至 iPhone 裝置進行校調 (Safari Web Inspector )

對 iOS 行動裝置(本例為 iPhone) 開啟 Safari Web Inspector (網頁檢閱器) 操作的設定步驟。

適用需求:

  • Mac 開發、需要即時在 iOS 行動裝置上瀏覽畫面並直接使用 Safari Inspector 操作。


Step 1. Safari 設定

Mac 的 Safari :

  • "Safari" -> “偏好設定” -> "進階" -> 勾選“在選單列中顯示開發選單”

    Image

Image

iPhone 的 Safari:

  • "設定" -> "Safari" -> “進階” -> 開啟“網頁檢閱器”

    Image

Step 2. iPhone Safari 瀏覽網頁

Image

Step 3. iPhone 與 Mac 實體連接、開啟 Mac Safari

  • 將 iPhone 透過 USB 線連接至 Mac

  • (Mac) Safari "開發“ → "iPhone 名“ → 頁面

    Image

即可直接對手機上的頁面使用 Web Inspector。

延伸:將手機投影至電腦

此時一邊在電腦操作 Safari Web Inspector、一邊得看著手機,若測試/校調過程想要錄影、截圖(甚至是同步擷取手機畫面與 Safari Web Inspector 的資訊)時,就很不方便。 此時我們可以利用將手機鏡射至電腦的工具,達成在電腦上同時瀏覽畫面與使用 Web Inspector的需求。 在此推薦 ApowerMirror

Image