AndroidのChromeを開発者モードでパソコンから操作・検証(Chromeタブ一覧も取得可能)

たまに開きすぎたスマホのタブの一覧を取得するのに今回の方法でPCと接続しているのだけど、たまにしかやらない上によく接続に失敗し、その度に調べる~というのを繰り返していたので、同じ過ち防止のためのメモ。

ついでにサイトのデバッグ方法までを記載。

スマホで見る

AndroidのChromeを開発者モードでパソコンから操作・検証(Chromeタブ一覧も取得可能)

デバッグまでの流れ

  1. Android端末を開発者モードにしてUSBデバッグを有効にする
  2. PC-Chromeで chrome://inspect/#devices へアクセスしておく
  3. Android端末でChromeを開き、端末とPCをUSBケーブルで接続
  4. 端末に現れる認証でOKを選択(ファイル転送・USBデバッグ)
  5. PC-Chromeに表示されたデバッグしたいサイトの inspect を選択
  6. ここまでくれば端末とPCがリンクされた状態なので、デバッグモードで好きにいじる

ざっと流れはこんな感じ。
今回はWindowsで行っているけど、基本Macでも同じくできるはず。

ちなみに使用端末は ASUS ZenFone4

Android端末を開発者モードにしてUSBデバッグを有効にする


「設定」を開く


設定 > システム > 端末情報 > ソフトウェア情報 > ビルド番号 ← 7回タップ!


設定 > システム > 開発者オプション


開発者オプション – ON、USBデバッグ – ON

Android端末とPCのChromeを接続


Android端末のChromeを開く


PCのChromeで chrome://inspect/#devices へアクセス


端末とPCをUSBケーブルで接続


ファイル転送とデバッグを許可


PCのChromeにAndroid端末-Chromeで開いているタブ情報が表示される

Android端末で表示しているサイトを操作・検証


Android端末で検証したいサイトを表示


PC-Chrome(chrome://inspect/#devices)で端末で開いているサイトの「inspect」を選択

ここまでくればもうあとは好きにデバッグ可能。

Share