Android Chromeで開発者ツール

用意するもの

事前準備

手順

  1. パソコンとAndroid端末をUSBでつなげる
  2. AndroidのChromeで適当なページを開く
  3. パソコンのChromeの右上のハンバーガーメニューから「その他のツール」→「デベロッパーツール」を選択
  4. 表示されたツールペインで更にハンバーガーメニューから「More toots」→「Remote devices」を選択
  5. するとこのような画面が表示される。

    もしこの画面と同じように「Pending」となっている場合は、Android端末側で「USBデバッグを許可しますか?」と表示されているので、「OK」する。

    「常に許可する」チェックするかどうかは任意。
  6. 左側の一覧から対象のデバイスを選択し、右側の対象のタブの右側から「Inspect」をクリックする。
  7. すると、このような独立したウィンドウが表示される。この画面でデバッグができる。
  8. 左上の「Toggle screencast」をOFFにすると、実機でフォーカスされた要素がハイライトされる。

参考