ブラウザーの開発者ツールとは

最近のウェブブラウザーには、強力な開発者ツール (devtools) が備わっています。開発者ツールでは、現在読み込まれている HTML、CSS、JavaScript を調べたり、ページが要求したリソースや読み込みにかかった時間を確認したりできます。この記事では、開発者ツールとは何か、基本的な機能の使い方を説明します。

メモ: 下の例を試す前に、ウェブ入門の記事シリーズで作成する初心者向けウェブサイトの例を開いてください。以下の手順では、このサイトを使います。

開発者ツールとは

ブラウザーの開発者ツールでは、表示中のウェブページを生成するためにブラウザーで処理されたコードの現在の状態を確認できます。これは、作成したソースコードとは異なる場合があります。例えば、ブラウザーは不正な HTML を修正し、JavaScript を実行してマークアップや CSS を変更することがあります。

開発者ツールでは、コードを表示するだけでなく、HTML や CSS を編集して UI の変化を確認したり、表示中のページに対して JavaScript を実行したり、エラーメッセージを含む JavaScript のデバッグを行ったりできます。また、ネットワークリクエストの検査、さまざまなビューポートサイズのエミュレーション、アクセシビリティ情報の確認などもできます。

この記事では、よく使われる開発者ツールの機能について基本的な情報を紹介します。詳しくは、各ブラウザーの資料を参照してください。

Firefox DevTools のユーザードキュメント^(英語)
Chrome DevTools^(英語)（Opera と Edge のインスペクターも同じです）
Safari Web Inspector^(英語)

ブラウザーの開発者ツールの開き方

開発者ツールはブラウザー内のサブウィンドウに表示されます。次のような見た目ですが、使用するブラウザーによって異なります。

開発者ツールを開くためのブラウザーに表示された画面。ウェブページはブラウザー上半分に表示され、開発者ツールは下半分を占めています。開発者ツールを開くためのパネルが 3 つあります。 HTML は本体要素を選択した状態で、 CSS パネルはハイライトされた本体を対象とするスタイルブロックを示し、計算スタイルパネルは作成者スタイルをすべて示しています。ブラウザースタイルチェックボックスはチェックされていません。

開発者ツールは、主に次の 3 つの方法で開くことができます。

キーボード:
- Windows と Linux: Ctrl + Shift + I または F12
- macOS: ⌘ + ⌥ + I
メニューバー:
- Firefox: メニュー (☰) ➤ その他のツール ➤ ウェブ開発ツール
- Chrome と Edge: その他のツール ➤ 開発者ツール
- Opera: 開発者 ➤ 開発者ツール
- Safari: 開発 ➤ Web インスペクタを表示
  
  メモ: Safari の開発者ツールはデフォルトで無効になっています。有効にするには、Safari ➤ 設定 ➤ 詳細に移動し、[Web 開発者向けの機能を表示] チェックボックスをオンにしてください。
コンテキストメニュー: ウェブページ上の項目を右クリック（Mac では Ctrl キーを押しながらクリック）し、表示されたコンテキストメニューから要素を調査または調査を選択してください。この方法では、調査対象に選んだ要素のコードがすぐにハイライト表示されます。

コンテキストメニューを表示させたウェブサイト（例）の DOM 要素としての Firefox ロゴ。ウェブページ上の項目を右クリックすると、コンテキストメニューが現れます。最後のメニューは「要素の検査」です。

インスペクター: DOM エクスプローラーと CSS エディター

開発者ツールを開くと、通常はインスペクターが表示されます。

ブラウザーでテストウェブサイトをタブで開きます。ブラウザー開発者ツールのサブウィンドウが開いています。開発者ツールを開発するにはいくつかのタブがあります。インスペクターはそのうちの 1 つです。インスペクタータブには、ウェブサイトの HTML コードが表示されます。 HTML コードから画像タグを選択します。その結果、ウェブサイト内の選択されたタグに対応する画像がハイライト表示されます。

このツールでは、実行時のページの HTML や、各要素に適用されている CSS を確認できます。また、HTML や CSS をその場で編集し、ブラウザーに表示される結果にリアルタイムで反映できます。

インスペクターが表示されていない場合は、次のタブを選択してください。

Firefox: インスペクタータブを選択してください。
その他のブラウザー: 要素タブを選択してください。

DOM インスペクターについて詳しく知る

まずは、DOM インスペクター上の HTML 要素を右クリック（Mac では Ctrl キーを押しながらクリック）して、コンテキストメニューを見てみましょう。

ブラウザー開発者ツールサブウィンドウを開きます。「インスペクター」タブが選択されています。「インスペクター」タブで利用できる HTML コードからリンク要素を右クリックします。コンテキストメニューが現れます。利用できるメニューオプションはブラウザーによって異なりますが、重要なものはほとんどのブラウザーで同じです。

メニュー項目はブラウザーによって異なりますが、主なものはほぼ共通です。

ノードを削除（要素を削除の場合もあり）: 現在選択中の要素を削除します。
HTML として編集（属性を追加/テキストを編集の場合もあり）: その場で HTML を編集し、結果を確認できます。デバッグやテストに便利です。
:hover/:active/:focus: 要素の状態を強制的に切り替え、そのときのスタイルを確認できます。
コピー/HTML としてコピー: 現在選択中の HTML をコピーします。
ブラウザーによっては、現在の HTML 要素を選択する CSS セレクターや XPath 式をコピーする CSS パスをコピーや XPath をコピーもあります。

それでは表示されている DOM を編集してみましょう。要素をダブルクリックしたり、右クリックして、HTML として編集を選んでみましょう。いろいろと変更してみても問題ありませんが、保存ができませんのでご注意を。

CSS エディターについて詳しく知る

デフォルトでは、CSS エディターに調査中の要素に適用されている CSS ルールが表示されます。ブラウザーによって、独立したパネルに表示されたり、スタイルタブ内に表示されたりします。

ブラウザー開発者ツールで HTML エディターに隣接して表示される CSS パネルとレイアウトパネルのスニペット。デフォルトでは、CSS エディターには、HTML エディターで現在選択されている要素に適用されている CSS ルールが表示されます。レイアウトパネルは、選択された要素のボックスモデルプロパティを表示します。

次の機能があります。

現在の要素に適用されている CSS ルールが詳細度の高い順に表示されています。
それぞれの宣言の隣にあるチェックボックスをクリックして、その宣言が消されるとどうなるかを試すことができます。
一括指定プロパティの隣にある矢印を開くと、それぞれの個別指定プロパティに対応する現在の値が表示されます。
各プロパティの名前か値をクリックすると、テキストボックスが表示され、変更することで、見た目のプレビューをその場で確認することができます。
各ルールの隣には、そのルールが定義されているファイル名と行番号が表示されます。クリックすると、通常は開発者ツール内の専用ビューに表示され、編集して保存できます。
ルールの閉じ中括弧をクリックすると、新しい行が表示され、そのルールに新しい宣言を追加してページに適用できます。

CSS エディターには、次のようなクリックできるタブもあります。

計算済み: 現在選択中の要素に適用される計算済みスタイル（ブラウザーが適用する最終的な正規化済みの値）を表示します。
レイアウト: 調査中の要素に CSS グリッドやフレックスボックスなどのレイアウトモードが適用されている場合、その詳細を表示します。
フォント: Firefox と Safari では、現在の要素に適用されているフォントを表示します。

ボックスモデルビューでは、現在の要素のボックスモデルを視覚的に確認できます。要素に適用されているパディング、境界線、マージンや、コンテンツの大きさがひと目で分かります。Firefox ではレイアウトタブにあり、他のブラウザーでは計算済みタブにあります。

一部のブラウザーでは、このパネルで選択した要素の JavaScript の詳細も確認できます。Safari ではノードタブにまとめられていますが、Chrome、Opera、Edge では別々のタブに表示されます。

プロパティ: その要素オブジェクトのプロパティ。
イベントリスナー: その要素に関連付けられたイベント。

もっと詳しく知る

各ブラウザーのインスペクターの詳細については以下をご覧ください。

Firefox Page Inspector^(英語)
Chrome DOM インスペクター^(英語)（Opera と Edge のインスペクターも同じです）
Safari 要素タブ^(英語)

JavaScript デバッガー

JavaScript デバッガーでは、変数の値を監視したり、ブレークポイントを設定したりできます。ブレークポイントは、コードの実行を一時停止して、正常な実行を妨げる問題を特定したい場所です。

ポート 8080 でローカルに提供されるテストウェブサイト。開発者ツールサブウィンドウを開きます。 JavaScript デバッガータブが選択されています。変数の値を見たり、ブレークポイントを設定したりできます。ソースペインからファイル名 'example.js' を選択します。ファイルの行番号 18 にブレークポイントを設定します。

デバッガーを開くには、次のようにします。

Firefox: 開発者ツールを開き、デバッガータブを選択してください。
その他のブラウザー: 開発者ツールを開き、ソースタブを選択してください。

デバッガーの探究

各ブラウザーの JavaScript デバッガーは 3 つのペインに分かれています。レイアウトはブラウザーによって異なりますが、このガイドでは Firefox を例に説明します。

ファイルリスト

左側の最初のペインには、デバッグしているページに関連するファイルのリストが表示されます。この一覧から、作業したいファイルを選択してください。ファイルをクリックすると選択され、その内容がデバッガーの中央のペインに表示されます。

ブラウザー開発者ツールのデバッガータブのソースペインのスニペット。デバッグしている現在のページに関連するファイルは、現在のブラウザータブで開くためのサイトの URL と同じ名前のフォルダー内に表示されます。

ソースコード

実行を一時停止したい場所にブレークポイントを設定します。次の画像では、18 行目がハイライトされており、その行にブレークポイントが設定されていることが分かります。

18 行目のブレークポイントがハイライトされた開発者ツールデバッガーパネルのスニペット。

ウォッチ式とブレークポイント

右側のペインには、追加したウォッチ式と設定したブレークポイントの一覧が表示されます。

ブラウザー開発者ツールのデバッガータブのソースペインのスニペット。コールスタックでは、 18 行目で呼び出される関数が表示され、この行にブレークポイントが設定されていることが強調され、スコープが示されています。

画像では、最初のセクションのウォッチ式に、listItems 変数が追加されています。リストを展開すると、配列内の値を確認できます。

次のブレークポイントセクションには、ページ上に設定されたブレークポイントが一覧表示されます。example.js では、listItems.push(inputNewItem.value); という文にブレークポイントが設定されています。

最後の 2 つのセクションは、コードの実行中にのみ表示されます。

コールスタックセクションには、現在の行に到達するまでに実行されたコードが表示されます。ここでは、マウスクリックを処理する関数内のコードがブレークポイントで一時停止していることが分かります。
スコープセクションには、コード内のさまざまな箇所から参照できる値が表示されます。例えば、画像では addItemClick 関数内のコードから利用できるオブジェクトを確認できます。

もっと詳しく知る

さまざまなブラウザーでの JavaScript デバッガーについて詳しく知ることができます。

Firefox JavaScript Debugger^(英語)
Chrome での JavaScript デバッグ^(英語)（Opera と Edge のデバッガーも同じです）
Safari Sources タブ^(英語)

JavaScript コンソール

JavaScript コンソールでは、ブラウザーに現在読み込まれているページに対して JavaScript の行を実行できます。また、ブラウザーがコードを実行しようとしたときに発生したエラーも報告されます。

どのブラウザーでもコンソールにアクセスするには、開発者ツールを開き、コンソール タブを選択します。これにより、次のようなウィンドウが表示されます。

ブラウザー開発者ツールのコンソールタブ。コンソールで 2 つの JavaScript 関数が実行されました。ユーザーは関数を入力し、コンソールは返値を表示しています。

以下のコードをひとつずつコンソールに入力して（Enter キーを押して）、何が起こるか試してみてください。

alert("hello!");

document.querySelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
loginImage.setAttribute(
  "src",
  "https://mdn.github.io/shared-assets/images/examples/login-button.png",
);
document.querySelector("h1").appendChild(loginImage);

次に、次の誤ったコードスニペットを入力して、どうなるか見てみましょう。

alert("hello!);

document.cheeseSelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
banana.setAttribute(
  "src",
  "https://mdn.github.io/shared-assets/images/examples/login-button.png",
);
document.querySelector("h1").appendChild(loginImage);

ブラウザーが返すエラーの種類を確認できます。エラーの内容が分かりにくいこともありますが、経験を積むにつれて見慣れてくるでしょう。

もっと詳しく知る

様々なブラウザーでの JavaScript コンソールについて詳しく知ることができます。

Firefox ウェブコンソール^(英語)
Chrome コンソール^(英語)（Opera と Edge のコンソールも同じです）
Safari Console Object API^(英語)およびConsole Command Line API^(英語)

ネットワークインスペクター

ネットワークインスペクターでは、ブラウザーでウェブサイトを表示するために取得する HTML 文書、画像、CSS、JavaScript、その他のリソースに関するネットワークリクエストとレスポンスを調べることができます。

ネットワークインスペクターを開くには、開発者ツールを開き、ネットワークタブを選択してください。次のようなウィンドウが表示されます。

さまざまなステータスコードのネットワークリクエストが表示された、ブラウザー開発者ツールのネットワークタブ。

多くの情報が表示されますが、基本的には、サイトがどのファイルを要求し、それらが正常に読み込まれたかを確認するのに役立ちます。

例えば、200 ステータスコードが表示されていれば、リソースは正常に配信されています。一方、404 が表示されている場合は、リソースが見つかりません。ファイルパスやファイル名が間違っているか、サーバーへのアップロードを忘れている可能性があります。

HTTP ステータス

サーバーはリクエストを受け取ると、ステータスメッセージを返します。よく見られるステータスは次のとおりです。

200: OK: 要求したリソースが配信されました。
301: Moved permanently: リソースが新しい場所に移動しました。ブラウザーで目にすることはあまりありませんが、検索エンジンはこの情報を使ってインデックスを更新するため、「301」について知っておくとよいでしょう。
304: Not modified: 前回のリクエスト以降、ファイルは変更されていません。そのため、ブラウザーはキャッシュ内のバージョンを表示できます。これにより、応答が速くなり、帯域幅を効率よく利用できます。
403: Forbidden: リソースを表示する権限がありません。通常は設定ミスを示します（例えば、ホスティングプロバイダーがディレクトリーへのアクセス権を付与し忘れた場合などです）。
404: Not found: 名前のとおり、指定された場所に要求したリソースが見つかりませんでした。
500: Internal server error: サーバーで問題が発生しました。例えば、サーバーサイド言語（PHP、.Net など）が動作しなくなった場合や、ウェブサーバー自体に設定上の問題がある場合です。このような問題は、ホスティングプロバイダーのサポートチームに報告してください。
503: Service unavailable: 通常、一時的なサーバーの過負荷が原因です。しばらくしてからもう一度試してください。

さらに詳しく

各ブラウザーのネットワークインスペクターについて詳しくは、以下を参照してください。

Firefox Network Monitor^(英語)
Chrome Network パネル^(英語)（Opera と Edge のネットワークパネルも同じです）
Safari Network タブ^(英語)

MDN の改良に協力

協力方法を知る

このページは 2026年11月10日に MDN の貢献者によって最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告