WindowsのChromeでiPhoneのSafariをデバッグする方法
本記事では、iOS（iPhone端末）のSafariで開いているページをWindowsPCのChromeからデバッグする方法を解説します。
この記事の目的
ウェブサイト制作において、スマートフォンのデバッグはPCブラウザのエミュレーターで行う事が多いですが、実機においてのみ発生するバグなどもゼロではありません。
この場合、エミュレーターだけでは原因が特定できないため、実機で挙動を確認する事になります。この時、スマホで見ているページの検証をPCのブラウザと同様にデベロッパーツールで行えると効率的になります。
Android端末の場合は、PCのChromeでデバッグが可能です。この場合は以下のGoogle公式の記事が参考になります。
Android 端末のリモート デバッグを行う | Chrome DevTools | Google Developers
この記事では、Windowsでウェブ制作をしていて、手持ちのiOS（iPhone）のSafariのデバッグをPC版Chromeのデベロッパーツールで行う手順をまとめます。
まずWindowsのパッケージ管理ソフトScoopをインストールする
Scoopとは
Scoopはコマンドで利用するWindows用のパッケージマネージャーです。
Scoopをインストールすると、PowerShell（※）（あるいはコマンドプロンプト）でコマンドを利用してソフトウェアをインストールしたり、アンインストールしたりする事ができます。
※PowerShellはWindowsのコマンドプロンプトの後継アプリです。以下の記事で丁寧に解説されています。
参考：PowerShell(パワーシェル)は何ができるの？メリット、使い方、実例まで｜ドスパラ通販【公式】
Scoop公式サイト : Scoop
Scoopインストール方法
以下のコマンドでインストールします。
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
これは、以下のコマンドでも同様とのこと。
iwr -useb get.scoop.sh | iex
権限の関係でエラーがでる場合は、権限変更するように、と公式サイトに記載されています。
Note: if you get an error you might need to change the execution policy (i.e. enable Powershell)
パワーシェル等の実行権限を変更する場合は以下のコマンドを実行します。
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
ただ、これだと現在のユーザーで権限変更する事になるので、現在のプロセスのみに適用させたい場合は、以下のコマンドを実行します。
Set-ExecutionPolicy RemoteSigned -scope Process
権限変更されたかどうかは、以下のコマンドで確認できます。
Get-ExecutionPolicy
上記を実行すると、RemoteSignedが表示されますが、この権限には以下の種類があります。
Restricted ： 全てＮＧ。デフォルトはこれらしい。
AllSigned ： 署名されてたらＯＫ。
RemoteSigned ： ローカルのはＯＫ。ネット上のは署名されてたらＯＫ。
Unrestricted ： 全てＯＫ。ただしネット上のは実行に確認が必要。
ただし、この場合、Powershellを終了すると権限が Restrictedに戻りますので、また権限を変更して何かを実行したい場合は"Set-ExecutionPolicy RemoteSigned -scope Process"を実行する必要があります。
Scoopがインストールされたか確認する
以下のヘルプコマンドを実行して、ヘルプが表示されればインストール完了です。
scoop help
iOS WebKit Debug Proxy と RemoteDebug iOS WebKit Adapter をインストールする
概要
次に、以下の3つのアプリ（ライブラリ）をインストールします。
- iOS WebKit Debug Proxy : 実機iOSのSafariを操作するためのツール
- RemoteDebug iOS WebKit Adapter : ChromeベースのデバッグツールでiOSをデバッグする際に必要なツール
- libimobiledevice : iOSのサービスと通信するためのライブラリ
今回は、以下のRemoteDebug iOS WebKit AdapterのREADME.txtの通り進めます。
ios-webkit-debug-proxy を libimobiledevice インストール
まず以下のScoopコマンドで、Scoopでインストールできるアプリを拡張します。
scoop bucket add extras
bucketとは、各アプリのGitのリポジトリとアプリのインストール方法がまとめられたJSON形式のファイルのようです。
Scoopはデフォルトでmain bucketと呼ばれるアプリ（bucket）があるのですが、main bucketの基準に満たさないが、有用なアプリであるとされるものはextraと呼ばれるbucketに格納されています。
このextraにios-webkit-debug-proxyも含まれるため、まず上記のコードを実行した、という事になります。
さて、scoop bucket add extrasでextrabucketをインストールしたら、以下のコマンドでios-webkit-debug-proxyをインストールします。
scoop install ios-webkit-debug-proxy
remotedebug-ios-webkit-adapter をインストール
これはNPMでインストールします。 コマンドは以下の通りです。
npm install remotedebug-ios-webkit-adapter -g
iOS（iPhone）のSafariのWebインスペクタを有効化する
以下の手順で有効化します。
- まず、iOS（iPhone）の設定へ移動し、Safariの設定を開きます。
- 詳細をタップします
- Webインスペクタのスイッチをタップして有効化します
iPhoneとPCをつないでデバイスを信頼させる
iPhoneとPCをケーブルでつなぎます。
すると、iPhone側に「このコンピュータを信頼しますか？」といった内容のポップアップが表示されるので、「はい」をクリックします。
また、PCの方ではiTunesを立ち上げると同様のメッセージが表示されるため、こちらも「はい」をクリックします。
remotedebug_ios_webkit_adapter を実行する
以下のコマンドで実行します。
remotedebug_ios_webkit_adapter --port=9000
なお、上記のコマンドを実行すると、自動的にios-webkit-debug-proxyも実行されるので、こちらは特に何もする必要はありません
Chromeのデベロッパーツールの設定でiOSのSafariで開いたページを確認できるようにする
まず、PCのChromeの開発者ツールの設定ページ（chrome://inspect/）へ移動し、Discover network targetsの項目のConfigureをクリックします。
以下の画像を参考にしてください。
次に、表示されたポップアップにlocalhost:9000を入力してDoneをクリックしてください。
これで設定は完了です。
iPhoneのSafariで閲覧しているページをPCのChromeデベロッパーツールでデバッグする
まず、iPhoneのサファリで何かウェブサイトへ移動します。
すると、PCのブラウザで開いている開発者ツールのページのRemote Targetの項目に、閲覧中のページが表示されます。表示されたら、inspectのリンクをクリックするとデベロッパーツールが開きます。
以下の画像も参考にしてください。
あとは通常のウェブページ同様にデベロッパーツールで要素を検証したり、コンソールでJSを実行したりする事が可能になります。
PCのデベロッパーツールにはスマホのSafariで閲覧しているページやスクロール位置が同期され表示されます。ただ、リアルタイムにスクロールまで同期されるわけではなく、タップの開始・終了位置に応じて同期のタイミングがあるようで、ややずれます。
検証を終了する
先ほどremotedebug_ios_webkit_adapterを実行したターミナル上でCtrl + Cを押下すると同期処理（remotedebug_ios_webkit_adapter）が終了します。
以上です。
iPhoneのSafariのデバッグ中に、エミュレーターだけでは解決できない問題に直面したら試して見てください。
