Chrome DevTools入門｜要素検証からデバッグまで
Chrome DevTools（開発者ツール）は、Google Chromeブラウザに内蔵されている開発支援ツールです。Webページの要素を検証したり、JavaScriptのデバッグを行ったりできます。この記事ではDevToolsの基本的な使い方を初心者向けに解説します。
DevToolsの開き方
DevToolsを開くにはいくつかの方法があります。
キーボードショートカット
Windows / Linux: F12 または Ctrl + Shift + I
macOS: Cmd + Option + I右クリックメニューから開く
Webページ上で右クリックして「検証」を選ぶと、クリックした要素が選択された状態でDevToolsが開きます。
メニューから開く
Chromeのメニュー（右上の三点アイコン）から「その他のツール」「デベロッパーツール」を選択します。
Elementsパネル（要素検証）
Elementsパネルでは、WebページのHTMLとCSSをリアルタイムに確認・編集できます。
HTML要素の確認
左上の矢印アイコン（またはCtrl + Shift + C / Cmd + Shift + C）をクリックすると、ページ上で要素を選択できるモードになります。調べたい要素をクリックすると、そのHTMLが表示されます。
CSSの確認と編集
要素を選択すると、右側の「Styles」タブに適用されているCSSが表示されます。
/* 表示される情報の例 */
.article-title {
font-size: 24px;
color: #333;
margin-bottom: 16px;
}CSSの値はその場で変更できます。変更はリアルタイムでページに反映されますが、リロードすると元に戻ります。デザインの調整を試すのに便利です。
よく使う操作
- 値をクリックして直接編集（フォントサイズ、色など）
- チェックボックスでCSSプロパティの有効/無効を切り替え
- 「Computed」タブで最終的に計算された値を確認
- 「Layout」タブでFlexboxやGridのレイアウトを視覚的に確認
HTMLの一時的な編集
HTMLの要素をダブルクリックするか、右クリックして「Edit as HTML」を選ぶと、その場でHTMLを編集できます。テキストの変更やクラスの追加など、表示の確認に使えます。
Consoleパネル
Consoleパネルでは、JavaScriptのコードを実行したり、エラーメッセージを確認したりできます。
JavaScriptの実行
Console下部の入力欄にJavaScriptのコードを入力してEnterキーで実行できます。
// ページのタイトルを取得
document.title
// 要素を取得
document.querySelector('.article-title')
// 簡単な計算
2 + 3
// 変数の定義と使用
const items = document.querySelectorAll('li')
items.lengthエラーの確認
JavaScriptのエラーはConsoleパネルに赤色で表示されます。
Uncaught TypeError: Cannot read properties of null (reading 'textContent')
at script.js:15:30エラーメッセージの右側に表示されるファイル名と行番号をクリックすると、エラーが発生したコードの場所に移動できます。
console.logの活用
開発中にデータの中身を確認するにはconsole.log()が便利です。
// 基本的なログ出力
console.log('デバッグ情報:', data);
// テーブル形式で表示
console.table([
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
]);
// 警告とエラー
console.warn('注意: この関数は非推奨です');
console.error('エラーが発生しました');
// 処理時間の計測
console.time('処理時間');
// ... 何かの処理 ...
console.timeEnd('処理時間');Consoleのクリアとフィルタ
Ctrl + L (Cmd + K) : Consoleの表示をクリアドロップダウンメニューで「Errors」「Warnings」「Info」「Verbose」を切り替えると、表示するメッセージのレベルを絞り込めます。
Networkパネル
Networkパネルでは、Webページが読み込むリソース（HTML、CSS、JavaScript、画像、APIリクエストなど）を確認できます。
基本的な使い方
- DevToolsのNetworkパネルを開く
- ページをリロードする（
Ctrl + R/Cmd + R） - 読み込まれたリソースの一覧が表示される
リクエストの詳細
一覧からリソースをクリックすると、詳細情報が表示されます。
- Headers: リクエストとレスポンスのヘッダー情報
- Preview: レスポンスのプレビュー（JSONの場合はツリー形式で見やすい）
- Response: レスポンスの生データ
- Timing: リクエストの各フェーズにかかった時間
フィルタ機能
上部のフィルタボタンで特定の種類のリソースだけを表示できます。
All : すべてのリソース
Fetch/XHR : APIリクエスト
JS : JavaScriptファイル
CSS : CSSファイル
Img : 画像ファイル
Doc : HTMLドキュメントAPIのリクエストを確認したい場合は「Fetch/XHR」をクリックします。
ネットワーク速度のシミュレーション
「No throttling」のドロップダウンから通信速度を選ぶと、低速な回線をシミュレートできます。モバイル回線でのページ表示速度を確認するのに便利です。
Sourcesパネル（デバッグ）
Sourcesパネルでは、JavaScriptのソースコードを確認し、ブレークポイントを使ったデバッグができます。
ブレークポイントの設定
- Sourcesパネルでデバッグしたいファイルを開く
- 行番号をクリックしてブレークポイント（青いマーカー）を設定
- ページをリロードまたは操作してコードが実行されると、ブレークポイントで停止
デバッグ操作
ブレークポイントで停止したら、以下の操作で実行を制御できます。
F8 (Cmd+\) : 実行を再開する
F10 (Cmd+') : 次の行に進む（ステップオーバー）
F11 (Cmd+;) : 関数の中に入る（ステップイン）
Shift+F11 : 関数から出る（ステップアウト）変数の確認
デバッグ中に右側の「Scope」パネルで、現在のスコープにある変数の値を確認できます。また、「Watch」パネルに式を追加して、特定の値を監視することもできます。
debuggerステートメント
コード内にdebuggerと書くと、DevToolsが開いているときにその行で自動的に停止します。
function calculateTotal(items) {
let total = 0;
for (const item of items) {
debugger; // ここで停止する
total += item.price * item.quantity;
}
return total;
}Applicationパネル
ApplicationパネルではWebページのストレージ（データの保存領域）を確認・操作できます。
localStorage / sessionStorage
Webページが保存しているデータを確認できます。
// localStorageにデータを保存
localStorage.setItem('theme', 'dark');
// データを取得
localStorage.getItem('theme'); // "dark"DevToolsのApplicationパネルで「Local Storage」を選ぶと、保存されているキーと値の一覧が表示されます。値の編集や削除もできます。
Cookie
Webサイトのクッキー情報を確認・編集できます。名前、値、有効期限、ドメインなどの情報が表示されます。
よく使うテクニック
レスポンシブデザインの確認
DevToolsのツールバーにあるデバイスアイコン（Ctrl + Shift + M / Cmd + Shift + M）をクリックすると、デバイスツールバーが表示されます。画面サイズを変更したり、特定のデバイスのサイズをシミュレートしたりできます。
スクリーンショットの撮影
コマンドメニュー（Ctrl + Shift + P / Cmd + Shift + P）を開いて「screenshot」と入力すると、ページ全体やノードのスクリーンショットを撮影できます。
ページの読み込み速度を確認
Networkパネルの下部に表示される統計情報で、ページの読み込み時間やリソースの総サイズを確認できます。Lighthouseパネルを使うと、パフォーマンス・アクセシビリティ・SEOなどの総合的な評価も得られます。
まとめ
Chrome DevToolsは、Web開発に欠かせない強力なツールです。Elementsパネルで要素とCSSを検証し、Consoleパネルでエラーの確認やJavaScriptの実行を行い、NetworkパネルでAPIリクエストを確認し、Sourcesパネルでブレークポイントを使ったデバッグができます。まずはF12キーでDevToolsを開いて、普段見ているWebページの裏側を覗いてみてください。