Android端末とPCを接続し、PCのchrome DevToolsを利用する方法

おおまかな手順

1. Androidの開発向けオプションを有効にする
2. USBでPCに接続する
3. PC側のChromeでchrome://inspectに接続する

操作した環境

• macOS 10.14.6
• Android 9

詳細

1. Androidの開発向けオプションを有効にする

1. 設定から端末情報の画面に進む
2. 下部にあるビルド番号を7回タップすると開発向けオプションが有効になる
3. 設定からシステムの画面にいき、詳細設定を開く
4. 開発向けオプションが表示されているのでタップ
5. 少し下に画面スクロールするとあるUSBデバッグをONにする → ここ忘れがち

2. USBでPCに接続する

1. USBでPCに接続する
2. Android側で「USBデバッグを許可しますか？」と聞かれるのでOKで許可する
3. Android側のChromeを立ち上げて適当なwebページを表示する

3. PC側のChromeでchrome://inspectに接続する

1. PC側のChromeを立ち上げ、アドレスにchrome://inspectと打ち込み移動
2. 接続している端末名とAndroid側のChromeで開いてるwebページ一覧が表示される
   
3. webページ名の下にあるinspectをクリックするとAndroid側で開いてる画面を開発ツールでいじれるようになる！