デベロッパーツール

機能

各機能はツール上部のアイコンから選択できます。

ツールの表示位置

初期状態では、デベロッパーツールはウィンドウ下部に表示されます。この表示位置は、ツール右上にあるボタンを押すことで、ウィンドウ右側へ移動できます。またこのボタンを長押しすることで追加のボタンが表示され、ウィンドウを切り離して表示することもできます。Undock Chrome Developer Tools - Stack Overflow

設定 (Settings)

右下にあるアイコンをクリックすると、設定画面が表示されます。

フォント サイズ

Ctrl + マウスホイールで、フォントのサイズを変更できます。ただしこのとき変更されるのはフォントだけではなく、アイコンやそれ以外のコントロールのサイズも変わります。ちなみにキーボードだけでこれを行うならば、次のキーになります。

  • サイズを拡大 … Ctrl + +
  • サイズを縮小 … Ctrl + -
  • 元のサイズに戻す … Ctrl + 0

レンダリング

デベロッパーツールがフォーカスされている状態でEscを押すことでdrawerが表示されるので、そこの[Rendering]タブでレンダリングの設定をできます。Rendering Settings - Google Chrome

設定項目は以下です。

  • Show paint rectangles
  • Show composited layer borders
  • Show FPS meter
  • Enable continuous page repainting
  • Show potential scroll bottlenecks

Device Mode

モバイル デバイスでの動作を確認できます。このモードへは[Device Mode]ボタンのクリックか、Ctrl + Shift + Mで切り替えられます。

意図したとおりに表示されないときには、ページを再読み込みしてみます。その必要があるときには、ページ上部に「You might need to reload the page for proper user agent spoofing and viewport rendering」と表示されます。

デバイスの指定

組み込みのデバイスを指定すると、次の設定が適用されます。

  • User Agent (UA) の文字列
  • 解像度とDPI (device pixel ratio)
  • タッチイベント
  • スクロールバーとviewport
  • viewportが未定義のページでのテキストサイズ
Built-in device presets - Test Responsive and Device-specific Viewports  |  Web  |  Google Developers