使用 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