ChromeDevToolsの紹介の第３弾となります。今回は前回紹介したデバイスモードの後編となります。

【注意】Chromeバージョンによっては機能が異なる場合があります。あらかじめご了承ください。

レスポンシブサイトでは、メディアクエリを利用してデザインされている場合がありますが、この機能を利用することでメディアクエリの動作確認や調査がしやすくなります。

「Show media queries」を選択することで利用できます。

青のバーが「max-width」のみ、緑バーが「max-width」と「min-width」、オレンジのバーが「min-width」のみの表示となっています。
メディクエリを書いてみたけど、思った通りに適用されないなと思ったら、ここで確認してみるのがよいかなと思います。

各バーを右クリック、「Reveal in source code」から、それぞれのメディアクエリが書かれているCSSの情報を確認することができます。

「Show rulers」を選択すると、ピクセル単位の目盛りを表示することができます。

Webサイトは、ハイエンドからローエンドまで様々な性能の端末を利用してアクセスされます。もちろん性能に関わらずWebサイトが問題なく表示されるようにする必要がありますよね。

この機能を利用すると、CPUとネットワークの性能を調整して表示してくれるので、性能ごとの動作を確認することができます。

「Mid-tier mobile」が高速3G回線、「Low-end mobile」は低速3G回線です。

もっと細かく調整したい場合は、「Performance」パネルや「Network」パネルで調整することもできます。

開発用のPCは性能がよく、ネットワーク環境も整っていたりするので、普通に動作確認しても問題ないと思っても、低速で動作させてみると思った通りに動かない、なんてこともあるかもしれません。

いかがだったでしょうか。今回はChrome DevToolsのデバイスモードについて後編を紹介させていただきました。今後もChrome DevToolsの機能を紹介していますので、よろしくお願いします。