1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. AndroidのChromeを開発者ツール(デベロッパーツール)で分析する方法!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

今回紹介するのはサイトのFaviconを様々なデバイスに対応した状態で一括変換してくれる「Real Favicon Generator for all platforms」です。スマートフォンのiOS/Android、...

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

現在ソースネクストでは、全製品が衝撃プライスのThe Chance Ultraキャンペーンとして、プロ用映像制作ソフトの最新版となるVegas Pro 16シリーズや知識がなくても作曲可能...

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

今回はWindowsを使っていて画像ファイルのサムネイル(縮小表示)が白くなって正常に表示されない問題が発生したときの解決方法を紹介したいと思います。先日スクリーンショ...

moto modsが30%OFF!春のmoto mods割引キャンペーンが実施中!

moto modsが30%OFF!春のmoto mods割引キャンペーンが実施中!

現在、Motorola公式ショップではモトローラ創立90週年 春のmoto mods割引キャンペーンが実施されています。moto Z、moto Z play、moto Z2、moto Z2 play、moto Z3、moto Z3...

日本未発売moto modsのMoto Z Flip Case Marstakを買ってみた!

日本未発売moto modsのMoto Z Flip Case Marstakを買ってみた!

今回は日本未発売のMoto Z Flip Case Marstakを購入してみたのでレビューを書きたいと思います。このケースはmoto Zシリーズのmoto mods用のケースで、moto mods装着用の磁...

Chromeの新機能Blink LazyLoadを有効にして表示を高速化しよう!

Chromeの新機能Blink LazyLoadを有効にして表示を高速化しよう!

Webページを閲覧していて気になるのはその表示速度ですが、今回は簡単にChromeの表示速度を上げる方法を紹介したいと思います。それがChromeの新機能であるBlink LazyLoad...

AndroidのChromeを開発者ツール(デベロッパーツール)で分析する方法!

AndroidのChromeを開発者ツール(デベロッパーツール)で分析する方法!

Web開発ではChromeの開発者ツール(デベロッパーツール)はよく使うものであり、必須とも言えるくらい便利なものです。レスポンシブでスマホ用のレイアウトを作る際に、PCのC...

Chromeを簡単にカスタマイズ!14色の公式ブラウザテーマを公開!

Chromeを簡単にカスタマイズ!14色の公式ブラウザテーマを公開!

Googleの「Chrome」チームが初となるChromeの公式テーマを公開しました。今回公開された14色のカラーリングは色合いや濃淡も様々なものが用意されています。これらのテーマ...

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

一般的なWebサイトに用いられている画像はPNGやJPEGがほとんどですが、今回はWebサイトにおける次世代画像フォーマットのWebP(ウェッピー)の話をしたいと思います。WebPはG...

NetaGear RSS News

Now Loading

Article

AndroidのChromeを開発者ツール(デベロッパーツール)で分析する方法!

 html+CSS+javascript 
Android_DevTools_000.png

Web開発ではChromeの開発者ツール(デベロッパーツール)はよく使うものであり、必須とも言えるくらい便利なものです。レスポンシブでスマホ用のレイアウトを作る際に、PCのChromeの開発者ツールでDeviceをスマホに変更した上で、開発者ツールを開いて検証しつつ対応することはよくありますが、中にはスマホ向けページはAndroidの実機で検証したい時もありますよね。

そこで今回はAndroidの実機のChromeで表示している内容を開発者ツールで分析する方法を紹介したいと思います。PCで表示した際と実機のAndroidで表示が微妙に異なるときなどにこの方法を使えば、どこが原因なのかをすぐに見つけ出すことができるのでとても便利です。

Android端末でUSBデバッグを有効にする方法!


USB Debag

1 Androidの「設定」から「システム」にある「開発者オプション」を開いてUSBデバッグをONにします。※開発者オプションがすでに表示されていて、USBデバッグのやり方が分かる人はAndroid端末をWi-Fi経由でadb接続する方法!まで飛ばして読んでください。

android_adb_wifi_020.png
2 Androidの「設定」から「システム」にある「端末情報」にあるビルド番号を連続でタップします。

android_adb_wifi_021.png
3 「これでデベロッパーになりました!」と表示されればOKです。

android_adb_wifi_022.png
4 これで「開発者オプション」が表示されるようになっています。

android_adb_wifi_023.png
5 「開発者オプション」を開いてUSBデバッグをONにします。

AndroidのChromeの内容を開発者ツールで表示する方法!


android_adb_wifi_001.png
1 ここからはPC側での操作となります。ここからはAndroid SDKをインストールして、コマンドプロンプト上でadbコマンドが使える状態になっていることが前提なります。導入していない人は、先にAndroid SDKをインストールしてAndroid SDKのPathを通してください。



Android_DevTools_001.png
2 PCのGoogle Chromeで下記URLを開きます。

chrome://inspect/#devices

Android_DevTools_002.png
3 開発者ツールで見たいタブを選んで「inspect」を押すと開発者ツールが開きます。通常の開発者ツールと異なるのが、左のウィンドウに実機でのスマホと同じ表示がされるようになります。この状態ではスマホと表示が同期されていますし、PC側からもスクロールが可能になります。

Android_DevTools_004.png
4 Elementsタブで要素を選択するとハイライトされるなど通常の開発者ツールと同じように表示されます。

Android_DevTools_005.png
5 Networkタブではスマホ実機での表示速度の計測も可能です。このサイトのトップページで試した結果ですがFinish:2.42sでした。

Android_DevTools_003.png
6 スマホ側をスリープすると「The tab is inactive」と表示されます。

Android端末をWi-Fi経由でadb接続する方法!


Android端末をWi-Fi経由でadb接続する方法もあるので興味があればこちらもご覧になると便利かもしれません。基本的に優先で接続しいたほうが簡単ですので、Wi-Fi経由で接続するのは特殊な端末のときしか使わないのですが、覚えておいて損はないと思います。



今回の個人的感想




今回紹介したのはAndroidのGoogle Chromeで表示している内容を開発者ツールで見る方法でした。私も今までPC上でスマホ向けレイアウトを作っていましたが、どうしても実機のAndroidとの差異が出てしまう部分があったりしたのでその際にはこの方法でAndroidのChromeを開発者ツールで見ると原因がわかりやすいですし、非常に役に立つのでおすすめです。

基本的にPCで開発者ツールを使うのと同じなので、いつもどおり使うことができるのが良いですね。スマホの表示もPC側で出してくれるので、実機を見なくても使えます。スマホ実機ならではの操作を試したいときは実機で操作しつつConsolelogなどを確認することでテストもできます。

スマホ向けレイアウトの開発の際には、ぜひ実機を使ってこの方法で開発者ツールを活用してみてはいかがでしょうか?

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。