Webアプリを作っていると、PCでは問題なく動いていたのにデプロイしてスマホからアクセスすると動かない状況に遭遇することがあります。特にPWAなどはPC版のChromeとAndroid版のChromeで仕様が異なるため、PCで使えていたAPIが使えなかったり、挙動が変わったりします。
Android Chromeをエミュレートできれば、例えば以下のようにAndroidでの<code>Add to home screen(A2HS)</code>の挙動が確認できます。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--8kn4r332--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/f191b93a550e2c2057987ab9.png%3Fsha%3D3a070e4bda01ed2f0c847cbfc49120d593581bf3" alt="AndroidStudio_ADV_PWA_Install" loading="lazy" class="md-img">
今回はPC上でAndroidのChromeをデバッグする方法を説明します。
<h1 id="android%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%81%AEusb%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#android%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%81%AEusb%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95" aria-hidden="true"></a> AndroidスマートフォンのUSBデバッグを使う方法</h1>
手元にAndroidのスマホがある場合はUSBデバッグを使うのが一番楽です。
まずは以下の手順に従ってスマホのUSBデバッグを有効にします
<ol>
<li>スマホで設定→デバイス情報と移動して、ビルド番号を7回タップします。暗証番号を求められるので入力します。</li>
<li>
設定→システムに開発者向けオプションが追加されます</li>
<li>開発者向けオプションのデバッグにてUSBデバッグをオンにします</li>
<li>「USBデバッグを許可しますか?」と聞かれるのでOKをタップします</li>
<li>PCとAndroidをUSBで繋いだら、「アクセスを許可しますか?」で許可をタップします。Androidの通知バーにUSBデバッグが接続されましたと表示されれば完了です。</li>
</ol>
次はPC側で設定を行います。
<ol>
<li>PC側のChromeで<a>chrome://inspect/#devices</a>にアクセスします。</li>
<li>Discover USB devicesにチェックを入れ、Port forwarding...をクリックします。</li>
<li>使用するPortとIP addressを指定します。(Ex: Port: 8000, IP address: localhost:8000)</li>
</ol>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--KETZ9bz4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/2298d8985141717e6ebac544.png%3Fsha%3D0b93ea5d4f73e507d5e5c20cbc60c0ccee676ba6" alt="chrome-inspect-port-forwarding-settings" loading="lazy" class="md-img">
設定が終わったら、Open tab with urlにURLを入力してOpenをクリックします。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--8sYuEvOF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/729e50efca4729215573ebb4.png%3Fsha%3Dd0ae3ee5d3c30358b3a04311557cd008761f6b35" alt="chrome-inspect-open-url" loading="lazy" class="md-img">
Inspectを押すとChromeのDevToolsが開き、スマホで開かれているChromeのタブに対してデバッグが出来るようになります。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--M0JfGmhd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/4ab67e3775758d22c3e65ca0.png%3Fsha%3Decffccf814141088f8e6f9c89a675c60f0ac9e53" alt="chrome-inspect-inspect" loading="lazy" class="md-img">
試しにこの状態でDevtoolsのConsoleに<code>new Notification("foo")</code>と入力してみると、以下のようなエラーが返ってきます。
<div class="code-block-container"><pre><code>Uncaught TypeError: Failed to construct 'Notification':
Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead.
</code></pre></div>これはAndroidのChromeでは<code>new Notification("foo")</code>のように通知を飛ばすことが許可されていないためです。正常に通知を飛ばすにはServiceWorkerを登録した上で、<code>showNotification()</code>を使う必要があります。
このようにAndroidのUSBデバッグを使えばPC版Chrome環境では見つけられなかった、Android Chrome環境固有のエラーも発見できます。
<h1 id="android-studio%E3%81%A7%E3%82%B9%E3%83%9E%E3%83%9B%E7%92%B0%E5%A2%83%E3%82%92%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#android-studio%E3%81%A7%E3%82%B9%E3%83%9E%E3%83%9B%E7%92%B0%E5%A2%83%E3%82%92%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> Android Studioでスマホ環境をエミュレートする方法</h1>
手元にAndroidのスマホが無かったり、USBを繋ぐのが面倒な場合はAndroid Studioが使えます。
<h2 id="android-studio%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#android-studio%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Android Studioのインストールと設定</h2>
まずは<a href="https://developer.android.com/studio#android-studio-downloads" target="_blank" rel="nofollow noopener noreferrer">こちら</a>にアクセスして、使用しているOSに対応したパッケージをダウンロードしてください。
<iframe id="zenn-embedded__fb1699663cd3e" src="https://embed.zenn.studio/card#zenn-embedded__fb1699663cd3e" data-content="https%3A%2F%2Fdeveloper.android.com%2Fstudio%23android-studio-downloads" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://developer.android.com/studio#android-studio-downloads" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.android.com/studio#android-studio-downloads</a>
ここではLinux向けのパッケージの手順を記載しておきます。
ダウンロードできたら、パッケージを解凍してください。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">tar xvf android-studio-*-linux.tar.gz
</code></pre></div>解凍したら、以下のコマンドでAndroid Studioを起動します。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">./bin/studio.sh
</code></pre></div>起動したら以下の手順に従って、仮想デバイスを作成します。
<ol>
<li>
<code>View</code>→<code>Tool Windows</code>→<code>Device Manager</code>をクリックします
</li>
<li>
<code>Create device</code>をクリックします
</li>
<li>
<code>Select Hardware</code>でPlay Storeマークのあるデバイスを選択します
<img src="https://res.cloudinary.com/zenn/image/fetch/s--xWgb7bHX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/f882c85620d21c0ff182c8d7.png%3Fsha%3Dbdb31d9a3c3825d7a96cfd3c617cea53cc6835e3" alt="AndroidStudio_SelectHardware" loading="lazy" class="md-img">
</li>
<li>
<code>System Image</code>で使用するAPIに対応したシステムイメージを選択します
<img src="https://res.cloudinary.com/zenn/image/fetch/s--2m_FSYNT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/623c3b957a50cc86b7a0c317.png%3Fsha%3Dfdd8042424dc98c31b171e8c19188edc45658a61" alt="AndroidStudio_SystemImage" loading="lazy" class="md-img">
</li>
<li>
<code>Android Virtual Device(ADV)</code>でデバイスの名前を決めたら、<code>Finish</code>をクリックします
</li>
</ol>
仮想デバイスを作成したら、<code>Device Manager</code>で<code>Launch this ADV in the emulator</code>をクリックして仮想デバイスを起動します。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--dRZil2hc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a19426334069f30ca8d594fc.png%3Fsha%3Db98be934c4a6b052aaf2b44dd847ffeba72a4e91" alt="AndroidStudio_LaunchADV" loading="lazy" class="md-img">
起動したらホーム画面のChromeをタップすればPC側の<code>chrome://inspect/#devices</code>に表示されます。USBデバッグの時のようにAndroid側で設定する必要はありません。

PCでAndroid Chromeをデバッグする

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

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

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

Discussion