Zenn
📲

PCでAndroid Chromeをデバッグする

2022/11/09に公開
Chrome
JavaScript
TypeScript
tech

Webアプリを作っていると、PCでは問題なく動いていたのにデプロイしてスマホからアクセスすると動かない状況に遭遇することがあります。特にPWAなどはPC版のChromeとAndroid版のChromeで仕様が異なるため、PCで使えていたAPIが使えなかったり、挙動が変わったりします。

Android Chromeをエミュレートできれば、例えば以下のようにAndroidでのAdd to home screen(A2HS)の挙動が確認できます。

AndroidStudio_ADV_PWA_Install

今回はPC上でAndroidのChromeをデバッグする方法を説明します。

AndroidスマートフォンのUSBデバッグを使う方法

手元にAndroidのスマホがある場合はUSBデバッグを使うのが一番楽です。

まずは以下の手順に従ってスマホのUSBデバッグを有効にします

  1. スマホで設定→デバイス情報と移動して、ビルド番号を7回タップします。暗証番号を求められるので入力します。
  2. 設定→システムに開発者向けオプションが追加されます
  3. 開発者向けオプションのデバッグにてUSBデバッグをオンにします
  4. 「USBデバッグを許可しますか?」と聞かれるのでOKをタップします
  5. PCとAndroidをUSBで繋いだら、「アクセスを許可しますか?」で許可をタップします。Androidの通知バーにUSBデバッグが接続されましたと表示されれば完了です。

次はPC側で設定を行います。

  1. PC側のChromeでchrome://inspect/#devicesにアクセスします。
  2. Discover USB devicesにチェックを入れ、Port forwarding...をクリックします。
  3. 使用するPortとIP addressを指定します。(Ex: Port: 8000, IP address: localhost:8000)

chrome-inspect-port-forwarding-settings

設定が終わったら、Open tab with urlにURLを入力してOpenをクリックします。

chrome-inspect-open-url

Inspectを押すとChromeのDevToolsが開き、スマホで開かれているChromeのタブに対してデバッグが出来るようになります。

chrome-inspect-inspect

試しにこの状態でDevtoolsのConsoleにnew Notification("foo")と入力してみると、以下のようなエラーが返ってきます。

Uncaught TypeError: Failed to construct 'Notification':
Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead.

これはAndroidのChromeではnew Notification("foo")のように通知を飛ばすことが許可されていないためです。正常に通知を飛ばすにはServiceWorkerを登録した上で、showNotification()を使う必要があります。

このようにAndroidのUSBデバッグを使えばPC版Chrome環境では見つけられなかった、Android Chrome環境固有のエラーも発見できます。

Android Studioでスマホ環境をエミュレートする方法

手元にAndroidのスマホが無かったり、USBを繋ぐのが面倒な場合はAndroid Studioが使えます。

Android Studioのインストールと設定

まずはこちらにアクセスして、使用しているOSに対応したパッケージをダウンロードしてください。

https://developer.android.com/studio#android-studio-downloads

ここではLinux向けのパッケージの手順を記載しておきます。

ダウンロードできたら、パッケージを解凍してください。

tar xvf android-studio-*-linux.tar.gz

解凍したら、以下のコマンドでAndroid Studioを起動します。

./bin/studio.sh

起動したら以下の手順に従って、仮想デバイスを作成します。

  1. View→Tool Windows→Device Managerをクリックします

  2. Create deviceをクリックします

  3. Select HardwareでPlay Storeマークのあるデバイスを選択します

    AndroidStudio_SelectHardware

  4. System Imageで使用するAPIに対応したシステムイメージを選択します

    AndroidStudio_SystemImage

  5. Android Virtual Device(ADV)でデバイスの名前を決めたら、Finishをクリックします

仮想デバイスを作成したら、Device ManagerでLaunch this ADV in the emulatorをクリックして仮想デバイスを起動します。

AndroidStudio_LaunchADV

起動したらホーム画面のChromeをタップすればPC側のchrome://inspect/#devicesに表示されます。USBデバッグの時のようにAndroid側で設定する必要はありません。

Discussion