iPadのSafariブラウザのWebインスペクタをWindows上のChromeで
iPadのSafariブラウザでWebサイトをデバッグする際、通常はMacのSafariで行うことが一般的である。
しかし、GIGAスクール端末としてiPadを導入した自治体にMacが同時に導入されているかというと必ずしもそうではないと考えられる。
MacのSafariブラウザのWebインスペクタを開いてアクセス上の問題解決につながった経験から、Windows環境で同じことができれば対応できる可能性が高まるため、このページではその情報が記載されているサイトの情報と周辺ツールとトラブルシューティングについて記載しておく。
なお、iPadOS15以降のSafariでは拡張機能が追加できるようになり、Webインスペクタ拡張機能がありますのでそちらを使っても良いと思います。ただし、画面が狭いですのでPCで作業したい場合はこのページの方法が快適です。
Windows環境の構築方法は左記サイトを参照。
ただ、設定時に注意点があって、この解説サイトの作業は前提とする環境があることが前提になっているので、その部分を補足しておく。
まず、サイトの手順を始める前にNode.jsのWindows版を導入しておく。これをしておくことで解説通りの設定ができる。
1.Node.jsをインストール
2.Scoopをインストール
3.iOS WebKit Debug Proxyをインストール(Scoop)
4.RemoteDebug iOS WebKit Adapter をインストール(Node.jsのnpmコマンド)
5.iPadOSのSafari設定でWebインスペクタを有効化
6.iPadとWindowsPCをケーブルで接続→信頼するをタップ
7.remotedebug_ios_webkit_adapter を実行
8.WindowsPCのChromeで chrome://inspect/ を開く
9.Discover network targetsのConfugireをクリック
10.localhost:9000 を入力してDoneをクリック
11.iPadのSafariで適当なWebサイトにアクセス
12.Remote TargetにiPadのSafariで開いているサイトリストが出てくるか確認
13.必要に応じてinspectをクリックするとWebインスペクタが開く
以下の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ケーブルを抜き挿しすると復活するので表示されない時はケーブルを再接続してみること。