AndroidのChromeで開発者ツールを使用してコンソールを確認する方法
HITOSUKEのシステム開発Unitでシステム開発を担当しているTです。
今回は、AndroidのChromeで開発者ツールを使用してコンソールを確認する方法を紹介していきたいと思います。
Webアプリケーションの作成するときに、PC上で開発者ツールを使用することは多いと思います。
そんな便利な開発者ツールをAndroidでも使用することが可能で、とても便利だったのでやり方を共有したいと思います。
Androidの準備
まず初めに、Androidで開発者ツールを使用するための準備をしていきます。
開発者向けオプションの設定
Android側で行う設定は、開発者向けオプションの設定です。
すでに開発者向けオプションの設定を行っている方は、このセクションを飛ばして問題ありません。
はじめに、設定アプリを開き、デバイス情報を開きます。
端末やOSのバージョンの違いによってデバイス情報がない場合は、設定アプリ内の検索窓に「ビルド番号」と入力して開きます。
該当箇所を開いたら、ビルド番号という項目があるので、7回タップすることで開発者向けオプションの設定が完了します。
PC（Windows）の準備
使用するPCがWindowsの場合、Google USB ドライバのダウンロードが必要です。
Google USB ドライバのダウンロード
インスト―ルはこちら(https://developer.android.com/studio/run/win-usb)から該当のページにアクセスできます。
アクセスできたら、画像の赤い四角で囲った箇所からダウンロードします。
なお、ページの注意書きにもあるように、Mac OS XとLinuxではダウンロードは不要とのことです。
Androidで開発者ツールを使用する手順
ここまでの準備ができましたら、接続や使用の手順について解説していきます。
１．AndroidとPCをUSBケーブルで接続する
はじめに、動作の確認をしたいAndroidと確認をするためのPCをUSBケーブルで接続します。
その際に、アクセスの許可などが求められるので許可します。
２．USBデバッグの許可
接続ができましたら、Android側の設定でUSBデバッグの許可をします。
こちらは、Androidの設定アプリ内の検索窓から「USB」と入力し候補欄から「USB デバッグ」という項目をタップします。
開発者向けオプション内のUSB デバッグをオンにします。
この設定でUSBケーブルが接続されたら、USBデバッグがオンになります。
３．PCのChromeで操作画面を開く
AndroidとPCを接続した状態で、PCのChromeから下記のURLにアクセスします。
chrome://inspect/#devices
アクセスできましたら、画像の通り「Discover USB devices」のチェックボックスにチェックを入れます。
４．Androidで確認したいページを開く
次にAndroidのChromeで動作や表示を確認したいページを開きます。
ページを開くと前項で提示している画像のRemote Target配下にAndroidのChromeで開いているページが一覧表示されます。
５．PCで確認したいページを選択
3項のPCのChromeで開いたページ（chrome://inspect/#devices）のRemote Target配下にAndroidのChromeで開いているページURLが表示されていると思います。
その中で、確認したいページURLの下のinspectをクリックすると、新しいウィンドウでAndroidエミュレータと開発者ツールが表示されます。開発者ツールのタブを変更すれば、ConsoleやNetworkの確認もできます。
以上がAndroidで開発者ツールを使用する手順になります。
さいごに
AndroidのChromeで開発者ツールを使用してコンソールを確認することはできましたか？
私たちのサービスのユーザーもAndroid使用者が多いため、Androidでデバッグできる方法の理解は必須です。
もし、HITOSUKEのシステム開発Unitの知りたいことや興味・関心がありましたらぜひコメントください！
※HITOSUKEでは一緒に事業を盛り立ててくれる仲間を募集しています！
少しでも気になってくれた方は、こちらをご覧ください。
この記事が気に入ったらサポートをしてみませんか？