トップ > Android > Android端末に表示されているWebコンテンツをGoogle Chromeの開発者ツールでデバッグする方法

Android端末に表示されているWebコンテンツをGoogle Chromeの開発者ツールでデバッグする方法

Android Google Chrome Tips

このブログでは商品紹介にはてなブログ標準機能のAmazonアソシエイトを利用しています

数ヶ月に一回くらい必要になるけどその度にやり方を忘れるので書く

NOTE: このエントリはHow to inspect web contents shown on Android devices with Google Chrome(en)を和訳したものです

試行環境

あらかじめやっておくこと

手順

  1. USBケーブルでAndroid端末をPCに接続する
  2. Android端末に「USBデバッグ接続」の通知が表示されることを確認する
  3. PCのブラウザでchrome://inspect/#devicesを開く

スクリーンショット

f:id:wifeofvillon:20190204143704p:plain
chrome://inspect/#devices

f:id:wifeofvillon:20190204143657p:plain
inspectをクリックして表示されるインスペクタ

f:id:wifeofvillon:20190204143645p:plainf:id:wifeofvillon:20190204143639p:plain
PC上での編集内容がAndroidにも反映される

参考

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで