使用 ios-webkit-debug-proxy 來 debug iOS 上的 Safari

Photo by Alvaro Reyes on Unsplash
Photo by Alvaro Reyes on Unsplash

我們在開發網頁時,一定離不開 DevTools,不管是網頁元素的檢測、錯誤訊息的檢視等等之類的功能,對我們來說都是相當重要的,DevTools 幫助我們可以有效的排除與檢視許多問題。

我本身是使用 iPhone,一般在開發網頁時,我都是使用 Safari 測試網頁是否在手機上可以正常的呈現,也就是大家常聽到的 Responsive Web Design(自適應性網頁設計 a.k.a. RWD),或者是測試撰寫好的 JavaScript 是否可以正常的執行,尤其是 JavaScript 部分,我們最常使用的 console 來檢測,但是在手機上又無法直接檢視到底輸出了哪些訊息,所以出錯了也無從得知。

我有查詢過如何 debug 在手機上的 Safari,簡單說就是到手機的 Safari 進階選項設定好,再打開你 Mac 電腦上的 Safari 開發選單,但是我遇到過一直無法檢測到裝置的狀況,所以決定來找找有沒有其他的工具可以解決這個問題。

今天介紹一個可以讓你遠端 debug iOS 上 Safari 的好工具:ios-webkit-debug-proxy

The ios_webkit_debug_proxy (aka iwdp) proxies requests from usbmuxd daemon over a websocket connection, allowing developers to send commands to MobileSafari and UIWebViews on real and simulated iOS devices.

ios-webkit-debug-proxy 主要是透過 websocket 連線方式去連接代理 usbmux daemon 的請求。

安裝

在 MacOS 透過 homebrew 來直接安裝:

$ brew install ios-webkit-debug-proxy

Windows 則需要透過 scoop 來進行安裝:

$ scoop bucket add extras
$ scoop install ios-webkit-debug-proxy

Linux 上安裝:

$ sudo apt-get install autoconf automake libusb-dev libusb-1.0-0-dev libplist-dev libplist++-dev usbmuxd libtool libimobiledevice-dev
$ git clone https://github.com/google/ios-webkit-debug-proxy.git
$ cd ios-webkit-debug-proxy
$ ./autogen.sh
$ make
$ sudo make install

使用方式

在 Linux 上,你必須執行 usbmuxd daemon。如果你透過上方的 Linux 方式安裝,會新增一個 lib/udev 的規則,當設備連接時啟動 dameon。如果要驗證 usbmuxd 是否可以列出你的連接的裝置,執行 idevice_id -l

啟動模擬器或裝置

如果要啟動 iOS 的模擬器,你必須先設定以下的 proxy:

# Xcode changes these paths frequently, so doublecheck them
SDK_DIR="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs"
SIM_APP="/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator"
$SIM_APP -SimulateApplication $SDK_DIR/iPhoneSimulator8.4.sdk/Applications/MobileSafari.app/MobileSafari

模擬器可以透過 XCode 或者是 Command Line 來啟動。

設定 Inspector

要讓 Safari 可以透過 Inspector 被檢測,你必須到以下路徑將這個設定啟用:

Settings > Safari > Advanced > Web Inspector = ON

啟動 ios-webkit-debug-proxy

啟動 ios-webkit-debug-proxy 方式非常的簡單,打開 Terminal 後直接執行以下指令:

你也可以附加一些額外的參數, --debug--frontend--help,詳細請參考 README

$ ios_webkit_debug_proxy

預設 ios-webkit-debug-proxy 會開啟 9221 這個 Port,你可以到這個 Port 下看到你所有連接的裝置列表。

:9221 #裝置列表
:9222 #第 1 個連上的 iOS 裝置
:9223 #第 2 個連上的 iOS 裝置
...
:9322 for the max device

Demo

從上面範例可以看到,進入到 localhost:9221 後,會看到我所連接上的裝置,點入後可以看到目前我在 Safari 上開啟的頁面,點入後可以看到 console 的訊息。

Troubleshooting

iOS 10

我一開始在使用 ios-webkit-debug-proxy 有出現過一個訊息 (我的手機系統是 iOS 10):

Could not connect to lockdownd. Exiting.: No such file or directory. Unable to attach inspector ios_webkit_debug_proxy

這時候,你會看到「信任目前連線的電腦」,按下「信任」,如果還是無法連線到裝置,請執行以下命令(for MacOS):

$ brew update
$ brew reinstall --HEAD libimobiledevice
$ brew reinstall -s ios-webkit-debug-proxy

iOS 11

如果在 iOS 11 上遇到以下問題:

Unable to connect to XXX
Please verify that Settings > Safari > Advanced > Web Inspector = ON

請執行:

$ brew reinstall --HEAD ios-webkit-debug-proxy

更多常見問題請參考官方文件的 Troubleshooting

RemoteDebug iOS WebKit Adapter

RemoteDebug iOS WebKit Adapter 是基於 ios-webkit-debug-proxy 所開發出來的套件,它本身的優勢在於直接使用了 Chrome 的 DevTools,可以即時的預覽整個網頁的效果。

各個系統的安裝方式在 RemoteDebug iOS WebKit Adapter README 都有說明了,這裡直接以 MacOS 作為範例:

$ brew update
$ brew unlink libimobiledevice ios-webkit-debug-proxy
$ brew uninstall --force libimobiledevice ios-webkit-debug-proxy
$ brew install --HEAD libimobiledevice
$ brew install --HEAD ios-webkit-debug-proxy
$ npm install remotedebug-ios-webkit-adapter -g

基本上,這樣就安裝完成了!請記得,Safari 的 Web Inspector 選項必須還是要開啟喔!

設定 Chrome Inspect

  1. 開啟 Chrome 瀏覽器後,請輸入 chrome://inspect/#devices
  2. 找到第二個選項 Discover network targets,點選後面的 Configure... 按鈕
  3. 開啟後,加入 remotedebug-ios-webkit-adapter 預設的 Port 位置(預設為 9000)
  4. 執行 remotedebug_ios_webkit_adapter

從 Terminal 啟動 remotedebug_ios_webkit_adapter 後,可以在 chrome://inspect/#devices 看到了目前我 iOS Device 上的 Safari 所開的網頁,接著選擇 inspect 就可以開啟了,這時候你操控你的裝置時,網頁上也會完整的呈現你所操作的情況,真的是相當方便!

Link