在 Windows 上真機調試 iPhone(iOS) Safari Web 頁面

在移動端頁面開發中，需要處理 Android 和 iOS 的兼容性問題。在 Chrome DevTools 中選擇手機模式，可以一定程度上模擬移動端的頁面，但更多的只是方便進行頁面布局的調試和兼容。一些移動端的特性與表現，在真機和模擬情況下還是有存在很大差別的（比如軟鍵盤的彈出等），尤其是 iOS 出於某些“考慮”表現出不符合標准的 BUG，在 Windows Chrome 中更是難以定位。

本文介紹如何在 Windows 系統中連接 iPhone Web 頁面進行真機調試。

工具資料

iPhone + 數據線
iTunes
Node.js 環境
remotedebug-ios-webkit-adapter
Chrome 瀏覽器（勿使用過低版本 Chrome）
梯子（可能需要）

環境准備

實現真機調試主要是使用了 remotedebug-ios-webkit-adapter 這一工具，使用方法在其 gitHub 主頁上有介紹，可以直接按照其官方說明安裝使用。本文對其 Windows 下的安裝使用進行了一些細節的補充和說明。

安裝 scoope

scoope 是一個 Windows 命令行安裝工具，類似 linux 下的 yum 或 apt-get。remotedebug-ios-webkit-adapter 的安裝將使用該工具。

使用 powershell（powershell 是 Windows 預裝的 Shell 工具）依次執行一下命令，安裝 scoope：

1 2	Set-ExecutionPolicy RemoteSigned -scope CurrentUser iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

稍等片刻就安裝成功了。如果安裝失敗，請嘗試使用管理員權限執行。

安裝 remotedebug-ios-webkit-adapter

使用 cmd、powershell 或 git bash 依次執行以下命令，安裝依賴環境：

1
2
3

scoop bucket add extras
scoop install ios-webkit-debug-proxy
npm install -g vs-libimobile

（這里默認你的電腦已經安裝了 Node.js 環境，否則 npm 命令將執行失敗）

安裝 remotedebug-ios-webkit-adapter：

1	npm install remotedebug-ios-webkit-adapter -g

安裝成功后，你將能在命令行中使用 remotedebug_ios_webkit_adapter 命令

安裝 iTunes

訪問官網，下載 iTunes。這里注意 iTunes for Windows 提供兩個版本，一個是從 Windows Store 下載，另一個是安裝包。選擇后者下載安裝。

連接調試

進入 iPhonse 中的 設置 > Safari 瀏覽器 > 高級 > Web 檢查器，開啟該選項。
打開 iTunes 並連接 iPhone，在 iPhone 彈框中選擇信任該電腦。
打開命令行，執行以下命令，啟動適配器：
1

remotedebug_ios_webkit_adapter --port=9000
在 iPhone 中打開 Safari 瀏覽器，打開待調試頁面。
打開 Chrome 瀏覽器，進入 chrome://inspect/#devices 頁面，在 Discover network targets 選項添加 localhost:9000 配置。刷新頁面，這時頁面中會出現 'Remote Target' 列表，該列表展示了 iPhone 中打開的頁面，點擊 inspect，即可進行調試。

注意：如果第 5 步中未出現待調試頁面，請重啟 remotedebug_ios_webkit_adapter 工具，然后刷新或重啟瀏覽器重試。

說明

在首次點擊 inspect 打開真機調試工具時可能需要科---學0000上000000網，否則可能出現 404 錯誤。

命令行執行失敗時，請嘗試使用管理員權限，或查看其官網說明。

請勿使用較低版本的 Chrome 瀏覽器

該例中使用了 Windows 10、Chrome 73.0.3683.75、iOS 12.1.4。

其他系統下的安裝和使用請查看 remotedebug-ios-webkit-adapter gitHub 主頁。