はじめに
この記事は、前回・前々回に続く「実務で役立つショートカット紹介シリーズ」です。
今回は Chrome DevTools のショートカットや操作、コマンド を中心に、基本的な使い方から現場ですぐに使える実践的テクニックまでを紹介します。
普段からDevToolsを使っていても、実はまだまだ便利な機能が埋もれているものです。
この記事では、参考記事を調べながら、自分でも理解しやすいように整理しました。
検証環境：Google Chrome 131（2025年12月時点）
1. 基本操作
| ショートカット | 操作内容 |
|---|---|
| Ctrl+Shift+I (Mac: Cmd+Option+I) | DevTools即開き |
| Ctrl+Shift+J (Mac: Cmd+Option+J) | Console即開き |
| Ctrl+Shift+C (Mac: Cmd+Option+C) | Elements即開き |
2. Console 特定コマンド
$0 // 現在選択中の要素
$1 ~ $4 // 直前選択した要素の履歴
$_ // 最後に返った値
$$('img[loading="lazy"]') // querySelectorAllのショートカット
$x('//img[@loading="lazy"]') // XPath検索も可能
copy($0.outerHTML) // 選択要素のHTMLをクリップボードに
console.table(users) // 配列・オブジェクトをテーブル表示
console.dir($0) // オブジェクトとして詳細表示
console.group('API') … console.groupEnd() // ログを折りたたみ
console.assert(false, 'ここ通ってる？') // 条件偽で赤文字表示
monitor(fetch) // fetchが呼ばれるたびに自動停止
monitorEvents($0, ['click','touchstart']) // イベント自動ログ
debug(myFunction) // 関数が呼ばれるたびに停止（undebugで解除）
clear() // コンソール全クリア
keys(localStorage) // localStorageのキー一覧取得
3. Network 診断フロー
- Preserve log ON + Disable cache ON
- Status列クリック → 400/500系が上に来る
- 右クリック → Block request URL → 広告/Analyticsが原因か即検証
- 右クリック → Copy → Copy as fetch（または Copy as cURL）→ 完全再現コード1秒取得
- 下部の「Throttle」→ Slow 3G / Offline で低速再現
4. Sources ブレークポイント6選
| 種類 | 操作方法 | 効果 |
|---|---|---|
| XHR/Fetch | Sources → XHR Breakpoints → + → /api/users
|
API呼んだ瞬間に100%停止 |
| DOM変更 | Elements右クリック → Break on → subtree modifications | innerHTML書き換えで即停止 |
| 属性変更 | Elements右クリック → Break on → attribute modifications | class追加・data-*変更で停止 |
| 条件付き | 行番号右クリック → Add conditional breakpoint |
userId === 12345 のときだけ止まる |
| イベントリスナー | Event Listener Breakpoints → click / change | どこでイベント登録されたか即わかる |
| 画像・スクリプト404 | Event Listener Breakpoints → Load → error | 壊れたリソース即特定 |
Sources → XHR Breakpoints → + → /api/users
Elements右クリック → Break on → subtree modifications/attribute modifications
subtree modifications
attribute modifications
行番号右クリック → Add conditional breakpoint
Event Listener Breakpoints → Load → error
5. 神機能18選
| No | 種類 | 操作方法 | 効果 |
|---|---|---|---|
| 1 | Local Overrides | Sources → Overrides → フォルダ選択 | 本番JS/CSSをローカルで永久修正 |
| 2 | Changesタブ | Sources → Changes | 修正差分を1クリックでコピー |
| 3 | Coverage | Coverage → Record → リロード → Stop | 赤＝未使用コード→バンドル削減の宝 |
| 4 | Request blocking | Network下部 → + でURLパターン入力 | 特定スクリプトだけ強制404 |
| 5 | フルサイズスクショ | Ctrl+Shift+P → Capture full size screenshot | 縦10,000pxも1枚で保存 |
| 6 | JS完全無効化 | Ctrl+Shift+P → Disable JavaScript → リロード | JS壊れ時の挙動を即確認 |
| 7 | メモリロード（キャッシュ完全無視） | Ctrl+F5 または長押しリロード → 「キャッシュを無視して再読み込み」 | キャッシュバグを確実に暴く |
| 8 | メモリリーク即特定 | Memory → Allocation instrumentation on timeline → Start | 青スパイク＝犯人確定 |
| 9 | Angularコンポーネント即取得 | Consoleで ng.probe($0) | スコープ・サービス即取得 |
| 10 | ファイル即検索 | Ctrl+P（Mac: Cmd+P）→ ファイル名入力 | minify JSでも1秒で開ける |
| 11 | コード整形（Pretty print） | Sourcesで {} ボタンクリック | minifyコードを人間が読める形に |
| 12 | 次のエラーにジャンプ | Ctrl+G で検索結果を順に移動 | エラー巡回が爆速 |
| 13 | デバイスモード即切替 | Ctrl+Shift+M | モバイル検証1秒 |
| 14 | ネットワークスロットリング即適用 | Network → Throttling → Slow 3G / Offline | 低速回線再現が即できる |
| 15 | ダークモード強制 | Ctrl+Shift+P → Emulate CSS prefers-color-scheme: dark | ダークモード未対応ページも即確認 |
| 16 | 視覚障害シミュレーション | Ctrl+Shift+P → Emulate vision deficiencies | 色覚異常・ぼやけ確認が即できる |
| 17 | バック/フォワードキャッシュテスト | Application → Test back/forward cache | bfcacheが効かない原因を即特定 |
| 18 | Live Expression | Console右上の目アイコン → 式入力 → リアルタイム監視 | 変数の値が常に表示される |
7. ショートカット
| 目的 | Windows/Linux | Mac |
|---|---|---|
| DevTools開く | Ctrl+Shift+I / F12 | Cmd+Option+I |
| Consoleにフォーカス | Ctrl+L | Cmd+L |
| 要素選択モード | Ctrl+Shift+C | Cmd+Shift+C |
| Command Menu | Ctrl+Shift+P | Cmd+Shift+P |
| ファイル検索 | Ctrl+P | Cmd+P |
| 全ファイル検索 | Ctrl+Shift+F | Cmd+Option+F |
| キャッシュ無視リロード | Ctrl+Shift+R | Cmd+Shift+R |
| ハードリロード | Ctrl+F5 | Cmd+Shift+R |
| デバイスモード切替 | Ctrl+Shift+M | Cmd+Shift+M |
| Performance録画開始 | Ctrl+E | Cmd+E |
| 次のパネル | Ctrl+] | Cmd+] |
| 前のパネル | Ctrl+[ | Cmd+[ |
あとがき
これまで DevTools は Elements、Console、Network くらいしか触っておらず、毎日使うツールなのに自分が理解していたのはほんのわずかだったのだと感じました。
記事を調べている中、特に印象に残っているのは次の三つです。
- XHRブレークポイントでAPI呼び出しのタイミングで処理を止められること
- Local Overridesを使って、本番環境のJavaScriptをローカルで書き換えて動作確認できること
- Copy as fetchでPostmanを使わなくても同等のリクエスト検証ができること
この三つだけでも調査の速度が一段変わりそうです。これから作業の中でしっかり活かしていきたいと思います。
Discussion