Android / iOSでPC経由で実機テスト・デバッグを行う方法

　WebでAndroid端末やiOS端末の実機テストを行いたい場合に、USB接続を行うことでパソコンでインスペクターを表示することができるようにするための設定をまとめます。

環境

パソコン: MBP2015(15inch)
Android: Huawei P10 Lite
iOS: iPhone7

Android -> Chrome(PC)

こちらの方法はパソコンがWindowsの場合でも行うことができます。

解説はしませんが、Windowsで使用する前に、WindowsにUSBドライバを追加する必要があります。
こちらのOEM USB ドライバのインストールを参考にインストールした後は、下と同じ操作になります。

Androidの設定

1. 本体設定 > 端末情報の中のビルド番号を7回タップします
   

2. すると本体設定 > 開発者向けオプションが表示されるようになります。
   

3. 開発者向けオプションを見ると、様々な設定があり、一番上にある開発者向けオプションのボタンをオンにすることでこれらの設定を利用できるようになります。今回は以下の項目を変更してください

• ネットワーク > USB設定を選択 をファイル(MTP)
• デバッグ　> USBデバッグ をオン

これで、Android側の設定が完了しました。

Chrome(PC)の設定

1. ChromeのDevToolsを開いて、以下のようにRemote devices を開きます。

1. Discover USB devices をオンにすると、左側の欄に接続した端末が出てきます。

1. 端末名をクリックすると、開いているタブ一覧が取得できるので、デバッグしたいサイトのInspect をクリックします。

1. このようにして、Androidで開いているタブのDevToolsを開くことができます。

普通のDevToolsと同じようにElementsをいじったり、Consoleに出力したりすることができます。また、左側のUIで、実機と同じようにタップ操作を行なうことができます。

iOS -> Safari(PC)

こちらも同様にiOS、Safari(PC)でそれぞれ設定していきます。

iOSの設定

1. 設定のアプリを開き、設定 > Safari > 詳細を開く
2. Webインスペクタをオンにする

Safariの設定

1. メニューバーから開発 > デバイス名 > タブ名 を選択します。

2. このようにして、開いているタブのインスペクタを開くことができます

注意事項

• Android -> Chrome(PC)の時に、毎回USBに接続してから、Androidの設定の3を行わないとできませんでした。

まとめ

これで、面倒臭い実機テストを、効率よくパソコンだけでできるようになりました😉
以上になります。修正・質問などありましたら、よろしくお願いします。

参考文献

• Android 端末のリモート デバッグを行う