如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯?

如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯?

Safari Web Inspector

使用 Safari 的網頁檢閱器(Web Inspector)遠端除錯,以下以 iPhone 6S 為例。

Step 1

下載並安裝 Xcode

Xcode

Step 2

開啟 iOS 設備的遠端除錯選項-設定 > Safari > 進階,打開「網頁檢閱器」。

打開 Safari Web Inspector

Step 3

使用 USB 線連接裝置,在開發選單上,即可看到剛才接上的裝置。

連接裝置

Step 4

先在裝置上使用 Safari 打開要檢視的網頁,然後回到電腦上指定要檢視的頁面(如下圖),這樣行動裝置上操作的狀況就可在電腦上監測了。

打開網頁

Chrome DevTools

使用 Chrome DevTools 遠端除錯,仍以 iPhone 6S 為例。要先跑完使用 Safari Web Inspector 遠端除錯的流程。

Step 1

安裝 ios-webkit-debug-proxy

brew install ios-webkit-debug-proxy

Step 2

在 terminal 執行以下程式碼。

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

從電腦上的任一瀏覽器打開 localhost:9221,可看到所有可用裝置。

可用裝置

打開 localhost:9222,可看到第一個連接裝置所監測頁面的詳細瀏覽資訊,複製連結後使用 Chrome 打開,即下一步 Step 3。

監測頁面的詳細瀏覽資訊

備註

連結裝置的資訊會依序在以下網址顯示

依此類推。

而每個裝置監測頁面的詳細資訊,若有藍色底線,代表這個連結可連到該頁的 Chrome DevTools 來檢視。這個序號是 Step 3 範例網址的 pageNum。

Step 3

在電腦上使用 Chrome 打開剛剛複製的連結(格式如以下網址),在這裡 portNumber 代入 9222、pageNum 代入 1,就可以使用 Chrome DevTools 檢視頁面了。

格式

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:{portNumber}/devtools/page/{pageNum}

範例

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1

操作手機的同時,可使用 Chrome DevTools 檢視頁面。

使用 Chrome DevTools 檢視頁面

不過用起來有時候會沒反應,就只能耐心等待、多嘗試幾次了 ╮(╯_╰)╭

參考資料


comments powered by Disqus