デベロッパーツール
機能
各機能はツール上部のアイコンから選択できます。
ツールの表示位置
初期状態では、デベロッパーツールはウィンドウ下部に表示されます。この表示位置は、ツール右上にあるボタンを押すことで、ウィンドウ右側へ移動できます。またこのボタンを長押しすることで追加のボタンが表示され、ウィンドウを切り離して表示することもできます。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が未定義のページでのテキストサイズ
参考
- Chrome DevTools Overview - Google Chrome
- 特集：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社 太田昌吾 (～2010/09/08)
ショートカットキー
複数の技術系サイトから、まとめて検索