iPhone の Safari を Windows でデバッグする方法

iPhoneのSafariで開いているページをWindowsのGoogle Chromeでデバッグする方法を紹介します。

事前準備

iTunesのインストール

まず、以下のURLからiTunesをダウンロードしてインストールします。

iTunes

最新のmacOSは、あなたの音楽、映画、ポッドキャスト、オーディオブックなどのコレクションを再生したり増やすための世界最高の方法です。

www.apple.com

Scoopのインストール

公式サイトに記載されているコマンドをPowerShellで実行し、Scoopをインストールします。

https://scoop.sh/

A command-line installer for Windows

scoop.sh

> irm get.scoop.sh | iex

権限のエラーが発生する場合は、以下のコマンドで権限を変更する必要があります。

# 権限変更
> Set-ExecutionPolicy RemoteSigned -scope CurrentUser

# 権限確認
> Get-ExecutionPolicy
RemoteSigned

Scoopが正しくインストールされたかを確認します。

> scoop -v
Current Scoop version:
v0.3.1 - Released at 2022-11-15

Node.jsのインストール

既にインストール済みの場合は省略してください。

> scoop install nodejs

iOS WebKit Debug Proxyのインストール

Scoop に extras bucket を追加してiOS WebKit Debug Proxyをインストールします。

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

GitHub - google/ios-webkit-debug-proxy: A DevTools proxy (Chrome Remote Debugging Protocol) for iOS devices (Safari Remote Web Inspector).

A DevTools proxy (Chrome Remote Debugging Protocol) for iOS devices (Safari Remote Web Inspector). - google/ios-webkit-d...

github.com

RemoteDebug iOS WebKit Adapterのインストール

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

GitHub - RemoteDebug/remotedebug-ios-webkit-adapter: Debug Safari and WebViews on iOS from tools like VS Code and Chrome DevTools

Debug Safari and WebViews on iOS from tools like VS Code and Chrome DevTools - RemoteDebug/remotedebug-ios-webkit-adapte...

github.com

iPhoneの設定

iPhoneの設定アプリを開き、「Safari」→「詳細」→「Webインスペクタ」をオンにします。

デバッグ方法

デバッグしたいページを iPhone の Safari で開きます。

Windows PCとiPhoneをUSBケーブルで接続します。接続時に信頼するかどうかを問われた場合は、「はい」を選択して信頼します。

RemoteDebug iOS WebKit Adapterの実行

PowerShellで以下のコマンドを実行してRemoteDebug iOS WebKit Adapterを起動します。

> remotedebug_ios_webkit_adapter --port=9000

Google Chromeの操作

Google Chromeのアドレスバーに「chrome://inspect/」と入力し、「Discover network targets」の「Configure」を開きます。「localhost:9000」と入力し、「Done」をクリックします。

すると、iPhoneのSafariで開いているページがChromeの「Remote Target」に表示されます。デバッガを開くには、「inspect」をクリックします。

デバッグの終了方法

デバッグを開始したPowerShellで「Ctrl + C」を押下すると、RemoteDebug iOS WebKit Adapterが終了します。