メインコンテンツへスキップ
Code & Craft
ツール比較 約11分で読めます

Chrome DevTools 上級者テクニック15選｜効率10倍UPの活用法

Chrome DevToolsの上級者向け機能を厳選。Performance計測、Memory分析、Network制御、デバッグ効率化まで、実務で必須のテクニックを15個紹介。

Chrome DevTools は、Web 開発者にとって最も重要なツールの一つです。しかし多くの開発者は、その機能のごく一部しか使っていません。この記事では、知っていれば生産性が10倍変わる上級者向けテクニックを 15 個紹介します。

1. Command Palette（⌘+Shift+P）

DevTools 内のすべての機能を検索できます。

Cmd+Shift+P (Mac) / Ctrl+Shift+P (Windows)

よく使うコマンド:

  • screenshot → フルページスクリーンショット
  • coverage → 未使用 CSS/JS の検出
  • disable javascript → JS 無効化テスト
  • show rendering → レンダリング詳細を表示
  • capture screenshot → 表示部分のスクショ
  • dark theme → ダークモード切替

この機能だけでも覚えれば、DevTools の使い方が劇的に変わります。

2. Console のログ拡張

console.table()

配列やオブジェクトの配列を表形式で表示:

const users = [
  { name: 'Alice', age: 30, role: 'Admin' },
  { name: 'Bob', age: 25, role: 'User' },
];
console.table(users);

console.group()

ログを階層化:

console.group('Authentication');
console.log('Checking token...');
console.log('Token valid');
console.groupEnd();

console.time()

実行時間の計測:

console.time('fetchUsers');
await fetchUsers();
console.timeEnd('fetchUsers'); // fetchUsers: 124ms

console.trace()

スタックトレース表示:

function inner() {
  console.trace('Called from');
}

3. $_ と $0〜$4 ショートカット

$_ (直前の結果)

> 2 + 3
5
> $_ * 10
50

$0〜$4 (選択中の要素)

Elements パネルで要素を選択すると、Console で $0 として参照できます。

$0.style.border = '2px solid red';
$0.getBoundingClientRect();

$1 は直前に選択した要素、$2 はその前 … と履歴を辿れます。

4. $ / $$ ヘルパー

jQuery のような要素取得ヘルパー:

$('button')      // document.querySelector('button')
$$('button')     // document.querySelectorAll('button') の配列

ページに jQuery がなくても、Console では使えます。

5. Live Expression

Console タブの「👁」ボタンで、リアルタイムに評価される式を追加できます。

// 以下をライブ式として追加
Date.now()
document.querySelectorAll('a').length
window.innerWidth

ページの状態変化を監視するのに便利です。

6. XHR / Fetch Breakpoints

特定の URL への通信でブレークできます。

Sources タブ → 右サイドの「XHR/fetch Breakpoints」→ + をクリック → URL パターンを入力。

例: /api/users を含む全ての fetch でブレーク。

7. Event Listener Breakpoints

特定のイベント（click、scroll 等）で自動ブレーク:

Sources タブ → 「Event Listener Breakpoints」→ 該当イベントにチェック。

使い所: 「このクリックでどのコードが実行されてるの？」を調査する時。

8. Conditional Breakpoints（条件付きブレークポイント）

ブレークポイントを条件付きで設定できます。

Sources タブで行番号を右クリック → “Add conditional breakpoint” → 条件を入力。

// ユーザーIDが 123 の時だけブレーク
user.id === 123

ループ内で特定の状況だけデバッグしたい時に便利です。

9. Logpoints（コード変更なしで console.log）

Conditional Breakpoints の「ログポイント」版。コードを変更せずに console.log を追加できます。

行番号を右クリック → “Add logpoint” → 式を入力:

'User:', user, 'count:', count

ブレークせず、ログだけ出力されます。本番のコード変更を最小限にしたい時に重宝します。

10. Network throttling カスタム設定

「Network」タブで回線速度を制限してテストできます。

  • Fast 3G: 1.5 Mbps
  • Slow 3G: 400 Kbps
  • Offline: ネットワーク切断

カスタムプロファイル:

Network → Throttling → Custom → Add。

Name: Slow 4G
Download: 1500 kbps
Upload: 750 kbps
Latency: 150 ms

実ユーザーの環境を再現してテストすることで、パフォーマンス問題を早期発見できます。

11. Performance パネルの完全活用

基本的な使い方

  1. Performance タブを開く
  2. 録画ボタン（●）をクリック
  3. 操作を行う
  4. 停止

重要な指標

  • FPS: 緑色のバー、60fps が理想
  • CPU: どのタスクに時間がかかっているか
  • Main: メインスレッドの活動
  • Interactions: ユーザー操作の応答時間

Flame Chart（フレームチャート）

関数呼び出しの階層と実行時間を可視化。長いバーが最適化の対象です。

Bottom-Up タブ

コスト順に関数を並べて表示。「一番時間がかかっている関数はどれか」が一目でわかります。

12. Memory パネルでメモリリーク検出

Heap Snapshot

  1. Memory タブを開く
  2. “Heap snapshot” を選択
  3. “Take snapshot” をクリック
  4. 操作を行う
  5. 再度スナップショット
  6. “Comparison” で差分を確認

メモリリークの典型的な原因:

  • 削除済み DOM 要素への参照
  • グローバル変数への蓄積
  • リスナーの解除漏れ
  • クロージャによる保持

Detached DOM

削除されたはずの DOM 要素が JavaScript から参照されて残っている状態。Comparison で「Detached」と表示される要素は要注意です。

13. Coverage（未使用コード検出）

Command Palette で show coverage → Reload で計測開始。

ページに読み込まれたコードのうち、実際には使われていない行を可視化します。

色意味
赤未使用
青使用済み

バンドルサイズ削減の有力なヒントになります。

14. Rendering タブの可視化ツール

Command Palette で show rendering。

Paint flashing

ペイントが発生している領域を緑色でハイライト。無駄な再ペイントの検出に有効。

Layout Shift Regions

レイアウトシフトが発生した領域を青色でハイライト。Core Web Vitals の CLS 改善に必須。

Frame Rendering Stats

FPS・GPU メモリをリアルタイム表示。

Scrolling performance issues

スクロールでパフォーマンス問題がある要素を検出。

15. Workspaces（ローカルファイルの直接編集）

DevTools からローカルファイルを直接編集できます。

  1. Sources タブ → “Filesystem” → “Add folder to workspace”
  2. プロジェクトフォルダを選択
  3. 該当ファイルを開いて編集 → Cmd+S で保存
  4. ファイルに直接反映される

エディタと DevTools を行き来せず、開発できます。

おまけ: Keyboard Shortcuts

ショートカット動作
Cmd+Shift+C要素選択モード
Cmd+Shift+IDevTools 開閉
Cmd+[ / Cmd+]パネル切替
Cmd+Shift+Mデバイスモード
Cmd+Shift+PCommand Palette
Cmd+Fパネル内検索
Cmd+Shift+F全ファイル検索
Cmd+Pファイル名検索

Device Mode の応用

Responsive Mode で、特定のデバイスをエミュレート:

  • iPhone 15 Pro
  • iPad Pro
  • Galaxy S23
  • カスタムサイズ

追加機能:

  • Device Pixel Ratio 設定
  • タッチエミュレーション
  • 地理情報の偽装
  • ジオロケーション無効化

Snippets（コードスニペット）

Sources → Snippets → “New snippet” でコードを保存。

// Debug utility
console.log('Elements:', $$('img').length);
console.log('URL:', location.href);
console.log('Title:', document.title);

Cmd+Enter で実行。よく使うデバッグコードを保存しておけば、手入力の手間が省けます。

まとめ

Chrome DevTools は、知れば知るほど開発生産性が上がるツールです。特に以下の5つは今日から使い始めることをおすすめします。

  1. Command Palette: すべての機能への入り口
  2. console.table: データ構造の可視化
  3. Logpoints: コード変更なしでログ追加
  4. Coverage: 未使用コードの検出
  5. Performance パネル: ボトルネックの特定

テクニックを身につけることで、デバッグ時間を大幅に削減し、パフォーマンスの問題も早期発見できるようになります。

参考リンク

#Chrome DevTools #デバッグ #パフォーマンス #開発ツール
シェア:

関連記事

ツール比較

Cursor Composer でマルチファイルリファクタリングを一括実行する手順【実践】

ツール比較

Cursor IDE Composer モード 使い方【2026年4月最新】マルチファイル編集で開発効率5倍

ツール比較

Vercel v1.40 新機能でフロントエンドデプロイを自動化｜環境変数管理・プレビューデプロイ・分析機能の活用【2026年最新】

← 記事一覧に戻る