Android版 Chrome でデバックする

この記事を書いた動機

　自分用のメモとして、実際にやったことを記録し、ノートを取るみたいな感じにしたいと思ったのと、私は、自分用のWebアプリみたいなのを開発しているのだが、その過程でスマホ版のブラウザでのデバックをしたくなったというのがある。

　二番煎じではあるが、他のブログでの説明はなんか画像とか少なくて不満があったというのもあり、ならば自分でやってみたらというところも経緯としてある。（自分も人のこと言えたほど大したこと書けないけど。。。）

環境

スマホ側

Pixel 5a 5G
Android版 Chrome 131
Android 14

PC側

Windows 11 (linux環境でも同じことはできると思う)
Windows版 Chrome 131

イメージ

概要

adb コマンドの環境構築
USBデバックの接続
PCで chrome://inspect/#devicesを開く
デバックしたいタブを選択して終わり

デバックの仕方

adb をインストールする（PC側）

開発ツールをダウンロード
　今回は、以下のページから"platform-tools-latest-windows.zip"をダウンロード
　SDK Platform-Tools リリースノート | Android Studio | Android Developers
開発ツールを展開と配置する　適当な場所（ダウンロード）とかで展開し、配置する。今回は、“C:"直下に開発者ツールを配置することとする。

# ダウンロードして展開したフォルダの中に入っている、"platform-tools"を以下の様な形になるように配置する

(base) PS C:\> ls platform-tools

    Directory: C:\platform-tools

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---          2025/01/11     0:20        5969000 adb.exe
-a---          2025/01/11     0:20         108136 AdbWinApi.dll
-a---          2025/01/11     0:20          73320 AdbWinUsbApi.dll
-a---          2025/01/11     0:20         451688 etc1tool.exe
-a---          2025/01/11     0:20        1874536 fastboot.exe
-a---          2025/01/11     0:20          54376 hprof-conv.exe
-a---          2025/01/11     0:20         242968 libwinpthread-1.dll
-a---          2025/01/11     0:20         479848 make_f2fs_casefold.exe
-a---          2025/01/11     0:20         479848 make_f2fs.exe
-a---          2025/01/11     0:20           1157 mke2fs.conf
-a---          2025/01/11     0:20         756840 mke2fs.exe
-a---          2025/01/11     0:20        1089833 NOTICE.txt
-a---          2025/01/11     0:20             38 source.properties
-a---          2025/01/11     0:20        2912360 sqlite3.exe

環境変数を設定する
- 設定画面を開く
- Path の環境変数を編集する
  
  補足
  
  ＠自分のアカウントでのみツールを使いたいときユーザー固有の環境変数として設定する。
  
  ＠どのアカウントでもツールを使いたいときシステム全体で設定される環境変数を設定する。
- adb.exe が入っている場所を追加する
コマンドが使えるのか確認