開発者ツールの使い方入門｜Elements・Console・Sources・Networkの概要

Web制作をしていると、「このサイトのHTMLを見たい」「どのようなCSSが指定されているか知りたい」と思うことはありませんか？

そんなときに役立つのが、ブラウザに標準搭載されている 開発者ツール（DevTools） です。

この記事では、開発者ツールの中でも特によく使われる主要タブ（Elements・Console・Sources・Network）の概要に絞って解説します。

開発者ツールとは？

開発者ツールとは、Webページの構造や動作を確認できるブラウザ内蔵の機能です。

Google Chrome や Microsoft Edge などの主要ブラウザには標準で搭載されています。

主に次のような確認ができます。

• HTML構造の確認
• CSSの適用状況の確認
• JavaScriptのエラー確認
• 通信状況の確認

開発者ツールの起動方法

開発者ツールは、キーボードの F12キーを押すと起動できます。

他にも以下の方法があります。

• 右クリック →「検証」を選択
• Ctrl + Shift + I（Windows）
• Command + Option + I（Mac）

画面の右側、または下部に開発者ツールが表示されます。

開発者ツールの主要タブ一覧

開発者ツールには複数のタブがありますが、まず覚えておきたいのは次の4つです。

Elements

表示されているページのHTML構造やCSSスタイルを確認し、リアルタイムで編集できます。

• ページのHTML構造をツリー形式で表示
• 選択した要素に適用されているCSSを確認可能
• HTMLやCSSをその場で一時的に編集し、表示の変化を確認できる

特定の要素にどのスタイルが適用されているかを調査する際に最適です。

開発者ツール確認デモ

デモページを開き、開発者ツールを起動して「Elements」タブを選択してみましょう。
HTML構造やCSSがどのように表示されているかを確認できます。

Console

JavaScriptのエラーやログを確認できます。

• エラーメッセージの確認
• console.log()の出力確認
• JavaScriptコードの実行

フォームが動かない場合や、JSが効かない場合の調査に最適です。

開発者ツール確認デモ

デモページを開き、開発者ツールを起動して「Console」タブを選択します。
その後、「Console確認ボタン」を押して、ログやエラーが表示される様子を確認してみましょう。

Sources

ページが読み込んだすべてのファイル（HTML、CSS、JavaScript、画像など）の中身を確認できます。

• 読み込まれているファイル一覧
• ブレークポイント設定
• コードのステップ実行

主にデバッグ作業に使用されます。

開発者ツール確認デモ

デモページを開き、開発者ツールを起動して「Sources」タブを選択します。
読み込まれているHTMLやJavaScriptのファイル構成を確認してみましょう。

Network

ページの通信状況を確認できます。

• どのファイルが読み込まれているか
• 読み込み時間
• エラー（404など）の確認

画像が表示されない場合や、APIが正常に動作しない場合の調査に役立ちます。

開発者ツール確認デモ

デモページを開き、開発者ツールを起動して「Network」タブを選択します。
その状態でページをリロード（Ctrl + R）し、読み込まれるファイル一覧や通信状況を確認してみましょう。

開発者ツールを使うメリット

• 他サイトの構造を学習できる
• CSSの効き具合をすぐ確認できる
• エラー原因を素早く特定できる
• サイト表示速度の確認ができる

まとめ

開発者ツールは、Web制作をする上で非常に便利なツールです。

この記事で紹介した機能以外にも多くの機能がありますが、まずは

• F12で開く
• Elementsを見る
• Consoleでエラー確認

この3つから慣れていきましょう。

基本操作を押さえるだけでも、調査や修正のスピードが大きく向上します。