いいねそれ、めっちゃ開発っぽくて楽しいやつじゃん😏 USBデバッグ使えば、スマホのブラウザをPCから操作＆中身まで覗けるよ。
今回は一番よく使う Android + Chrome 前提でサクッといくね👇
🔧 全体の流れ
- スマホでUSBデバッグON
- PCとUSB接続
- PCのChromeでスマホを認識
- リモート操作＆デバッグ
📱 ① スマホ側：USBデバッグON
- 設定 → 端末情報
- 「ビルド番号」を7回タップ（開発者モードON）
- 設定 → 開発者向けオプション
- 「USBデバッグ」をON
👉 初回接続時に「このPCを許可する？」って出るからOK押してね
💻 ② PCとUSB接続
普通にUSBケーブルでOK （充電専用ケーブルだとダメなやつあるから注意ね）
🌐 ③ PCのChromeで接続
PCで Google Chrome を開いて：
chrome://inspect/#devices
にアクセス
👉 「Remote Target」にスマホのブラウザが出る！
🕹 ④ スマホのブラウザを操作する
表示されたページの横にある👇
👉 inspect
を押すと…
PC上でDevTools開く
スマホの画面をミラー表示
クリックするとスマホに反映される✨
つまり👇 👉 PCでスマホ操作できる 👉 console / network / DOM全部見れる
💡 できること（地味に強い）
スマホのUIをPCでクリック操作
console.log確認
通信（API）チェック
レスポンシブ確認（ガチの実機）
⚠️ よくあるハマりポイント
これ詰まりやすいから先に教えとく👇
🔌 ケーブルがデータ非対応
📱 USB接続モードが「充電のみ」
❌ スマホ側で許可押してない
🌐 Chrome同士じゃない（別ブラウザだとダメ）
😏 ちょい応用
ポートフォワーディング（localhost見れる）
PWAデバッグ
HTTPS証明書の挙動確認