WindowsでWeb制作をしているけれど、iPadの実機Safariでしか発生しない表示崩れや挙動の不具合が見つかってしまった……」通常であればMacのSafariにある「開発」メニューが必要になりますが、Windows PCからでも、USB接続したiPadのSafariをリモートデバッグ（要素の検証やコンソール確認）する方法があります。
はじめに
Windows環境をメインに据える開発者にとって、iOSのSafari特有のレンダリングや挙動の違いを解決するのは困難です。「実機でしか起きないバグを確認するには、Macを導入するしかないのか……」と、デバイスの壁により開発が停滞するのは非常に惜しいことです。
今回のTipsでは、Windows環境からiOSのSafariをデバッグする方法をご紹介します。
Windowsからリモートデバッグを実現する方法
iOS側「Webインスペクタ」を有効化
まず、iPad側で外部からのデバッグを許可する設定を行います。
- 「設定」アプリを開きます。
- 設定 → Safari → 詳細（または 設定 → アプリ → Safari → 詳細）へ進みます。
- 「Webインスペクタ」をオンにします。
Webインスペクタの設定後、デバッグしたいWebサイトをSafariブラウザで開いておきます。
Windows側の準備：Node.jsの導入
各種デバッグツールを動かすために、Node.jsが必要です。
wingetで最新版のNode.jsを入手するか、公式サイトよりダウンロードしてインストールしてください。
wingetで入手する場合
winget install -e --id OpenJS.NodeJS.LTS公式サイトより入手する場合
- Node.js公式サイトにアクセスし、「LTS（推奨版）」をダウンロードしてインストールします。
- インストール完了後、PowerShellまたはコマンドプロンプトを開き、以下のコマンドでバージョンが表示されれば成功です。
node -vnpm -v
Windows側の準備：必要ツールのインストール
次に、iPadを認識させるためのソフトウェアとプロキシツールをインストールします。
- iTunes をインストールし、iPadをUSBケーブルでPCに接続します。
※iTunesは最新版を導入してください。 - iPadに「このコンピュータを信頼しますか？」と表示されたら**「信頼」**を選択してください。
Scoopの導入
ios-webkit-debug-proxyをインストールするために、Windowsのコマンドライン・インストーラーである「Scoop」を利用します。もしPCに導入されていない場合は、以下の手順でセットアップしてください。
- PowerShellを管理者権限で実行します。
- スクリプトの実行を許可するために以下のコマンドを入力します。
- 「インストールコマンド」を実行します。
- 完了後、
scoop --versionと入力してバージョンが表示されれば準備完了です。
「インストールコマンド」
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')ios-webkit-debug-proxy のインストール
PowerShellで以下のコマンドを実行します。
scoop bucket add extras
scoop install ios-webkit-debug-proxyデバッグ用キットのセットアップ
例では、C:\work\debugにリポジトリをクローンします。
gitが導入されていない場合には、先にgitをインストールしてください。
wingetで入手する場合
winget install --id Git.Git -e --source winget公式サイトより入手する場合
- git公式サイトにアクセスし、インストーラーをダウンロードしてインストールします。
- インストール完了後、PowerShellまたはコマンドプロンプトを開き、以下のコマンドでバージョンが表示されれば成功です。
git --version
GitHubからリモートデバッグ用のキットを取得して設定します。
- 任意のフォルダで、リポジトリをクローンします。
- 生成された
srcフォルダに移動します。 - 初回生成処理を実行します。
任意のフォルダで、リポジトリをクローン
cd C:\work\debug\
git clone https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit.git「初回生成処理」
cd C:\work\debug\ios-safari-remote-debug-kit\src
powershell -ExecutionPolicy Bypass -File .\generate.ps1デバッグサーバーの起動と接続
準備が整ったら、デバッグ用のサーバーを起動します。
ios-safari-remote-debug-kit\srcフォルダでコマンドを実行します。
※このPowerShell画面は閉じずにそのままにしてください。 これにより、ポート「8080」でデバッグ画面用のサーバーが起動します。- 接続の確認（別のPowerShellウィンドウで実行可能）：
Test-NetConnection 127.0.0.1 -Port 8080がTrueになること。- ブラウザで
http://localhost:9221を開き、iPadのタブ情報が表示されていること。
ios-safari-remote-debug-kit\src フォルダでコマンドを実行
powershell -ExecutionPolicy Bypass -File .\start.ps1
実行すると、接続されている端末がリストされます。
ポート番号が9222で接続ができるようになっています。
start.ps1実行時にエラーが発生する場合 http-server のインストール
実行時に「http-serverが見つからない」という旨のメッセージが出た場合は、以下のコマンドでhttp-serverをインストールしてください。
npm i -g http-serverWebインスペクタを開く
最後に、Windows上の Chrome または Edge で以下のURLを開きます。
http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1
これで、Windows上のブラウザからiPad Safariで開いているページの要素検査やデバッグが可能になります。