WindowsでiOS Safariをデバッグしよう2024

始めに

実はWindowsでもiOS(iPadOS) Safariのインスペクトができます。

iOS WebKit Debug Proxyと、任意のWebkitインスペクターを使ってインスペクトをする。
iOS WebKit Debug ProxyのREADMEに非常に助けられた。ほとんどそれに従った。
ではやっていこう！

準備

以下の順番で進める。

1. yarnがインストールされていることを確認
2. Scoopをインストール
3. iOS WebKit Debug Proxyをインストール
4. iOSデバイスを設定、PCと接続
5. 任意のWebkitインスペクターフロントエンドを入手、使用

Scoopインストール

パッケージマネージャーです。

PowerShell

Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

操作実行の権限を変えたい場合はSet-ExecutionPolicyを調べてください。以下にコマンドは書きますが調べたほうがいいです。

PowerShell

Set-ExecutionPolicy RemoteSigned -scope CurrentUser # 現在のユーザーの実行権限を緩くする

iOS WebKit Debug Proxyインストール

PowerShell

scoop bucket add extras # インストールできるアプリの範囲を広げる
scoop install ios-webkit-debug-proxy

remotedebug-ios-webkit-adapterを入れるって記事が多いけど？

ChromeのDevToolsをどうにかして使うソフトですが、そのソフト、もう古くてメンテもされてないし、互換性ももうイマイチなので使うのはやめましょう。苦労するだけです。
iOS WebKit Debug ProxyのREADMEにも矛盾大きすぎって書いてあります（たぶんこれは直接プロキシーに接続する話かも）。

In recent versions of Chrome and Safari there're major discrepancies between Chrome Remote Debugging Protocol and Webkit Inspector Protocol, which means that newer versions of Chrome DevTools aren't compatible with Safari.

iOSデバイス設定

iOS 設定アプリ->Safari->詳細->Webインスペクタのスイッチをオンに
PCでiTunesを起動し、iOSデバイスとPCをUSBで接続し、それぞれ相手を信用する操作をする。
iTunesのWi-Fi同期をオンにして試したがうまくいかなかった。

任意のWebkitインスペクター入手、使用

私はwebkit-webinspectorを使いました。

PowerShell

ios_webkit_debug_proxy # プロキシーを起動

PowerShell

git clone https://github.com/artygus/webkit-webinspector.git # もしくはReleasesからダウンロードする
cd webkit-webinspector
yarn start

localhost:9221にアクセスして端末を選び、任意のリンクのアドレスの?ws=...以降をコピー。
localhost:8080/Main.htmlにアクセスし、URLの最後にさっきコピーした文字列を貼り付ける。

You can use the -f argument to specify different frontend source

とiOS WebKit Debug ProxyのREADMEに書いてあったのでそれに従って設定してみたが、僕が使ったインスペクターフロントエンドは読み込みが遅くなりすぎる不具合により使い物にならなかった。

終わりに

Windowsでもインスペクトができる！Mac miniを買わずに済みました。
工夫次第で、フリーでできることがわかりました。
みんなもやってみてね。