l08084のブログ

技術記事の執筆は、祈りに近い

ブラウザの開発者ツールによるAndroid/iOSアプリのデバッグ方法

はじめに

ブラウザの開発者ツールによるAndroid/iOSモバイルアプリのデバッグ方法について書きます。

開発環境

  • ブラウザ: Google Chrome (バージョン 60.0.3)、Safari (バージョン 9.1.3)
  • OS: OS X EI Capitan (バージョン 10.11.6)

Android

  1. デバッグしたいアプリを起動した状態でAndroid端末をPCに接続
  2. Chromeの開発者ツールを開く
  3. 開発者ツールのメニューから[More tools] -> [Remote devices]を選択

f:id:l08084:20170902231132p:plain

4.Remote devicesタブから、デバッグしたいアプリを選択

f:id:l08084:20170902231652p:plain

f:id:l08084:20170902231706p:plain

iOS

  1. デバッグしたいアプリを起動した状態でiOS端末をPCに接続
  2. Safariのメニューから[開発] を選択
  3. デバッグ対象のアプリを選択する(下のキャプチャーでは、アプリを起動していないので何も表示されない)

f:id:l08084:20170902233226p:plain

デバッグができない場合

モバイル端末をPCに接続したのに、デバッグ対象のアプリが認識されない!みたいな事が起きた場合は、下記のケースを疑ってみてください。

  • モバイル端末側の設定ができていない。例えばiPhoneだと、[設定] -> [Safari] -> [詳細] -> [Webインスペクタ]まだ進んで設定をONにする必要がある

  • モバイルアプリでも、パッケージング(アーカイブ)されたものについては、デバッグができない。iOSのケースでいうと、In Houseビルドされたものについては、端末を繋いでもアプリが認識されない

  • Safariの開発メニューがそもそも表示されない

    • 事前にSafariの設定が必要