はじめに
ブラウザの開発者ツールによるAndroid/iOSモバイルアプリのデバッグ方法について書きます。
開発環境
- ブラウザ: Google Chrome (バージョン 60.0.3)、Safari (バージョン 9.1.3)
- OS: OS X EI Capitan (バージョン 10.11.6)
Android
- デバッグしたいアプリを起動した状態でAndroid端末をPCに接続
- Chromeの開発者ツールを開く
- 開発者ツールのメニューから[More tools] -> [Remote devices]を選択
4.Remote devicesタブから、デバッグしたいアプリを選択
iOS
- デバッグしたいアプリを起動した状態でiOS端末をPCに接続
- Safariのメニューから[開発] を選択
- デバッグ対象のアプリを選択する(下のキャプチャーでは、アプリを起動していないので何も表示されない)
デバッグができない場合
モバイル端末をPCに接続したのに、デバッグ対象のアプリが認識されない！みたいな事が起きた場合は、下記のケースを疑ってみてください。
モバイル端末側の設定ができていない。例えばiPhoneだと、[設定] -> [Safari] -> [詳細] -> [Webインスペクタ]まだ進んで設定をONにする必要がある
モバイルアプリでも、パッケージング（アーカイブ）されたものについては、デバッグができない。iOSのケースでいうと、In Houseビルドされたものについては、端末を繋いでもアプリが認識されない
Safariの開発メニューがそもそも表示されない
- 事前にSafariの設定が必要
