デベロッパーツール
機能
各機能はツール上部のアイコンから選択できます。
AI イノベーション (AI innovations)
AI イノベーション | Chrome DevTools | Chrome for Developers
ツールの表示位置
初期状態では、デベロッパーツールはウィンドウ下部に表示されます。この表示位置は、ツール右上にあるボタンを押すことで、ウィンドウ右側へ移動できます。またこのボタンを長押しすることで追加のボタンが表示され、ウィンドウを切り離して表示することもできます。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 120以降、Self-XSSを防止するためクリップボードからの貼り付けが禁止されています。貼り付けようとすると「Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below and press Enter to allow pasting.」と警告されるため、これを無効にするには指示に従い”allow pasting”と入力します。[ソース] の [このコードを信頼しますか？] ダイアログと [コンソール] の自己 XSS 警告 - DevTools の新機能（Chrome 120） | Blog | Chrome for Developers
参考
- Chrome DevTools | Chrome for Developers
- 特集：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社 太田昌吾 (～2010/09/08)