iPadのSafariブラウザのWebインスペクタをWindows上のChromeで

iPadのSafariブラウザでWebサイトをデバッグする際、通常はMacのSafariで行うことが一般的である。

しかし、GIGAスクール端末としてiPadを導入した自治体にMacが同時に導入されているかというと必ずしもそうではないと考えられる。

MacのSafariブラウザのWebインスペクタを開いてアクセス上の問題解決につながった経験から、Windows環境で同じことができれば対応できる可能性が高まるため、このページではその情報が記載されているサイトの情報と周辺ツールとトラブルシューティングについて記載しておく。

なお、iPadOS15以降のSafariでは拡張機能が追加できるようになり、Webインスペクタ拡張機能がありますのでそちらを使っても良いと思います。ただし、画面が狭いですのでPCで作業したい場合はこのページの方法が快適です。

起動スクリプト

以下のPowerShellスクリプトをデスクトップに適当なファイル名＋ps1拡張子で作成しておくと起動が楽です。

稀に前に実行した ios_webkit_debug_proxy がゾンビプロセスとして残っていることがあるので、スクリプトの最初に終了させるようにしています。また、念の為、nodeも停止しています。他にNode.jsを使っているものが動作している方はお気を付けください（道連れにして全部終了されます）。

■WebInspector4Safari.ps1

$ErrorActionPreference = "Silentlycontinue"

Stop-Process -Name node

Stop-Process -Name ios_webkit_debug_proxy

echo "インスペクタ候補が表示されない時はUSB接続をやり直してください"

remotedebug_ios_webkit_adapter --port=9000

トラブルシューティング

iPadのSafariでWebサイトにアクセスしてもWindows上ChromeのWebインスペクタに表示されないことがある。

この場合はremotedebug_ios_webkit_adapter を再起動しても状況が変わらないのでUSBケーブルを抜き挿しすると復活するので表示されない時はケーブルを再接続してみること。