ラック
Home > ブログ > 記事 > 2017年10月 > Android端末のChromeでデバッグしたい

Android端末のChromeでデバッグしたい

カテゴリ: ホームページ,スマホ,開発環境

Androidタブレット・スマホのChromeでのみ、Webサイトの一部文字が大きくなるという現象に遭遇。PCでは発生しなかったので、これの原因を突き止めるためにAndroid端末で開発者ツールを使いたくなりました。そこで、どうやって行うのか調べました。

手順

前提として、ChromeがインストールされたPCと、Android端末とPCを繋ぐMicroUSB-USBケーブルが必要です。また、最終的なデバッグ操作はPCで行います。

  1. Android端末の「設定」→「端末情報」→「ソフトウェア情報」に進む
  2. 「ビルド番号」を7回連続でタップ
  3. 「端末情報」メニューの一つ前に「開発者向けオプション」が表示されるようになるので、これをタップ。警告が表示されますがそのまま「OK」
  4. 「USBデバッグ」のチェックボックスをオンにする
  5. PCとAndroid端末をUSBで接続し、Android端末でPCからのアクセスを許可する
  6. PCでChromeを起動し、chrome://inspect/#devicesにアクセス
  7. 端末名とChromeで開いているWebページのリストが表示されるので、見たいWebページの下の「inspect」をクリック
  8. Android端末で表示しているWebサイトのChromeデベロッパーツールが起動するので、後はPCと同じようにデバッグする

以上のような手順となります。これで端末固有のデバッグもしやすくなりますね。

で、冒頭の現象への対処は続き(AndroidのChromeで一部テキストが大きくなる)で。

参考

タグ: html,Chrome,手順

 



関連する記事一覧