Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

環境

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

Android -> Chrome(PC)

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

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

Androidの設定

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

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

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

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

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

Chrome(PC)の設定

  1. ChromeのDevToolsを開いて、以下のようにRemote devices を開きます。
    スクリーンショット 2018-09-23 19.19.30.png

  2. Discover USB devices をオンにすると、左側の欄に接続した端末が出てきます。
    スクリーンショット 2018-09-23 19.19.57.png

  3. 端末名をクリックすると、開いているタブ一覧が取得できるので、デバッグしたいサイトのInspect をクリックします。
    スクリーンショット 2018-09-23 19.21.16.png

  4. このようにして、Androidで開いているタブのDevToolsを開くことができます。
    スクリーンショット 2018-09-23 19.21.56.png

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

iOS -> Safari(PC)

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

iOSの設定

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

IMG_6395.PNG

Safariの設定

  1. メニューバーから開発 > デバイス名 > タブ名 を選択します。 スクリーンショット 2018-09-23 19.37.26.png
  2. このようにして、開いているタブのインスペクタを開くことができますスクリーンショット 2018-09-23 19.37.53.png

注意事項

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

まとめ

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

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away