1.1 概要と起動方法

Overview and How to Open DevTools

Chrome DevTools（開発者ツール）は、Chromeブラウザに組み込まれたWeb開発・デバッグツールである。HTML/CSSの検査、JavaScriptのデバッグ、ネットワーク通信の監視、パフォーマンス分析など、Web開発のあらゆる場面で活用される。

DevToolsとは

DevToolsはGoogle Chromeに標準搭載されている開発者向けツールである。Webページの構造を調べたり、スタイルを変更したり、JavaScriptのエラーを見つけたりできる。追加インストール不要で、今すぐ使い始められる。

主な用途

用途 説明
HTML/CSSの検査 ページの構造を確認し、リアルタイムでスタイルを編集
JavaScriptデバッグ ブレークポイントを設置し、コードの実行を追跡
ネットワーク分析 リソースの読み込み時間や通信内容を確認
パフォーマンス計測 ページの描画やスクリプト実行のボトルネックを特定
ストレージ確認 Cookie、localStorage、IndexedDBの内容を閲覧・編集
レスポンシブデザイン 様々な画面サイズでの表示をシミュレーション

DevToolsの起動方法

DevToolsを開く方法は複数ある。状況に応じて使い分けると効率的。

キーボードショートカット

ショートカット 動作 用途
F12 DevToolsを開く/閉じる 最も一般的な方法
Ctrl+Shift+I DevToolsを開く/閉じる F12と同等
Ctrl+Shift+J Consoleパネルを直接開く JavaScriptエラーの確認
Ctrl+Shift+C 要素検査モードで開く 特定要素を即座に調べたい時
Macの場合 MacではCtrlをCmdに、AltをOptionに置き換える。例: Cmd+Option+I

右クリックメニューから

操作手順

  1. 調べたい要素を右クリック
  2. メニューから「検証」を選択
  3. DevToolsが開き、クリックした要素がElementsパネルでハイライトされる

Chromeメニューから

操作手順

  1. Chrome右上の「⋮」（三点メニュー）をクリック
  2. その他のツール → デベロッパー ツールを選択

DevToolsの配置

DevToolsのウィンドウ位置は用途に応じて変更できる。

配置 特徴 適した用途
右側（デフォルト） ページ幅が狭くなる レスポンシブデザインの確認
下側 ページ高さが狭くなる 横長のコンテンツ確認
別ウィンドウ ページ表示領域を最大化 デュアルモニター環境

配置の変更方法

操作手順

  1. DevTools右上の「⋮」（三点メニュー）をクリック
  2. Dock sideから希望の位置を選択

ショートカット: Ctrl+Shift+Dで直前の配置と切り替え

主要パネルの概要

DevToolsは複数のパネルで構成されている。各パネルは特定の機能を担当する。

パネル 主な機能 詳細
Elements DOM・CSS検査 第2章
Console ログ確認・JS実行 第3章
Sources ファイル編集・デバッグ 第4章
Network 通信監視 第5章
Application ストレージ・キャッシュ 第6章
Performance パフォーマンス計測 第7章
Lighthouse 品質監査 第8章
パネル間の移動 Ctrl+[で前のパネル、Ctrl+]で次のパネルに移動できる。

Drawer（ドロワー）

Drawerは、メインパネルの下部に追加で表示できる補助パネル群。複数のツールを同時に表示したい場合に便利。

Drawerの開き方

  • EscキーでDrawerを開く/閉じる
  • または、DevTools右上の「⋮」→「Show console drawer」

よく使うDrawerタブ

タブ 機能
Console 他のパネルを見ながらConsoleを使う
Search 全ファイルを横断検索
Changes 変更内容の差分表示
Coverage 未使用コードの検出
Network conditions ネットワーク速度の制限
タブの追加 Drawerの「+」ボタンから、表示したいタブを追加できる。またはCtrl+Shift+Pでコマンドパレットを開き、「Show」と入力して検索。

コマンドパレット

DevToolsのほぼすべての機能にキーボードからアクセスできる。

使い方

  1. Ctrl+Shift+Pでコマンドパレットを開く
  2. 実行したい機能を入力（例: 「screenshot」「disable javascript」）
  3. 候補から選択してEnter

便利なコマンド例

コマンド 機能
Capture full size screenshot ページ全体のスクリーンショット
Capture node screenshot 選択要素のスクリーンショット
Disable JavaScript JavaScriptを無効化
Show Rendering レンダリングパネルを表示
Clear site data サイトデータをクリア
ファイルを開く Ctrl+P（Pのみ、Shiftなし）でファイル名検索。素早くソースファイルを開ける。

デバイスモード

様々なデバイスでの表示をシミュレーションできる。レスポンシブデザインの確認に必須。

起動方法

  • Ctrl+Shift+M
  • または、DevTools左上のデバイスアイコンをクリック

主な機能

  • プリセットデバイス（iPhone、iPad、Pixel等）の選択
  • 任意の画面サイズ指定
  • デバイスピクセル比（DPR）の変更
  • ネットワーク速度の制限
  • タッチイベントのシミュレーション
参考文献
[1] Open Chrome DevTools - Chrome for Developers. developer.chrome.com
[2] Chrome DevTools - Chrome for Developers. developer.chrome.com