要望

実機のAndroid端末で特定のWebページに対し、Webインスペクタで中身を書き換えたり、コンソール経由でスクリプトを叩いて実行した結果を見たい。

Android 端末のリモートデバッグを行う

MacのChromeやAndroidエミュレーターでもある程度の表示確認はできるが、やはり実機での操作感や見た目の確認は重要である。

少し調べてみたところ、MacとAndroid端末を接続することで、PCと同様に実機での動作確認が可能なことが判明したため、実際に試してみた。

MacとAndroid端末をケーブル接続。Chromeのデベロッパーツールを開き、[Main Menu] > [More tools] > [Remote devices] を選択。

[Remote Device] タブの [Settings] で [Discover USB devices] のチェックボックスがオンになっていることを確認。

[Devices] から対象のAndroid端末を選択。

[New tab] テキストボックスで、URL を入力して [Open] ボタンをクリック。

Android端末のChromeで対象ページが開くので [Inspect] をクリックすると、デベロッパーツールが立ち上がる。

スクリーンキャストで実機Android端末と同期。要素検証や書き換えもでき、コンソールでスクリプト叩いて実行することも可能。

便利。