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