お問い合わせ
お問い合わせ
ホーム > ウェブ制作 > ブラウザで確認する！デベロッパーツール（検証機能）の基本的な使い方

ブラウザで確認する！デベロッパーツール（検証機能）の基本的な使い方

ウェブ制作
ブラウザのデベロッパーツールを使ってHTML・CSS・JavaScriptを検証しているWeb制作のイメージ
ブラウザ標準のデベロッパーツール（検証機能）を使って、HTML・CSS・JavaScriptの確認やデバッグ、レスポンシブ表示のチェックを行う様子を表現したアイキャッチ画像です。

Web制作では、HTMLやCSSを書いただけでは完成ではありません。実際にブラウザで表示を確認し、レイアウトやスタイルが正しく反映されているかを検証することが重要です。

その際に欠かせないのが**デベロッパーツール（Developer Tools）**です。

デベロッパーツールを使えば、HTMLやCSSをリアルタイムで確認・編集したり、JavaScriptのエラーを調査したり、スマートフォン表示をシミュレーションしたりできます。

この記事では、初心者向けにデベロッパーツールの基本的な使い方をわかりやすく解説します。

デベロッパーツールとは？

デベロッパーツールとは、ChromeやEdgeなどのブラウザに標準搭載されている開発者向けの機能です。

主に次のようなことができます。

  • HTML構造の確認
  • CSSの確認・編集
  • JavaScriptエラーの確認
  • レスポンシブ表示の確認
  • 通信状況の確認
  • パフォーマンス分析

特別なソフトをインストールする必要はなく、ブラウザだけで利用できます。

デベロッパーツールを開く方法

Chrome・Edgeでは次の方法で開けます。

ショートカットキー

OSショートカット
WindowsF12 または Ctrl + Shift + I
MacCommand + Option + I

右クリックから開く

ページ上で右クリックし、

「検証」

をクリックします。

すると画面の右側または下側にデベロッパーツールが表示されます。

デベロッパーツールの画面構成

初めて見ると項目が多く感じますが、初心者がまず覚えるべきものはそれほど多くありません。

主に使用するタブは次の5つです。

タブ用途
ElementsHTML・CSS確認
Consoleエラー確認・JavaScript実行
SourcesJavaScriptデバッグ
Network通信確認
Device Toolbarスマホ表示確認

最初はこの5つだけ覚えておけば十分です。

Elementsタブの使い方

Elementsは最も利用頻度が高い機能です。

ここではHTML構造とCSSを確認できます。

HTMLを確認する

左側にはHTMLが表示されています。

例えば次のようなHTMLがあったとします。

<div class="card">
  <h2>タイトル</h2>
  <p>本文です。</p>
</div>

Elementsでは、この構造をそのまま確認できます。

どのタグがどこにあるかを簡単に把握できます。

CSSを確認する

HTMLをクリックすると右側にCSSが表示されます。

例えば、

.card {
  width: 300px;
  background: #fff;
}

のようなスタイルが確認できます。

どのCSSファイルから適用されているかも表示されます。

CSSを一時的に変更する

値をクリックすると、その場で変更できます。

例えば

width: 300px;

を

width: 500px;

に変更すると、その場で表示が変わります。

保存はされないため、安心して試せます。

デザインを調整するときによく利用されます。

CSSをON/OFFする

プロパティの左側にあるチェックボックスを外すと、

display: flex;

などを一時的に無効化できます。

どのCSSが影響しているのかを調べるときに便利です。

要素選択モードを使う

画面左上には矢印アイコンがあります。

これをクリックすると、

画面上の好きな要素を直接選択できます。

例えば、

  • ボタン
  • 見出し
  • 画像
  • メニュー

などをクリックすると、そのHTMLへ自動で移動します。

レイアウト崩れの原因を調べるときによく使われます。

Consoleタブの使い方

ConsoleはJavaScriptのエラー確認に使用します。

例えば、

console.log("Hello");

を実行すると、

Hello

と表示されます。

JavaScriptの学習では頻繁に利用します。

詳しくは

「JavaScriptのconsole.log()とは？使い方を初心者向けに解説」

も参考になります。

JavaScriptエラーを確認する

例えば、

console.log(userName);

と書いた場合、

ReferenceError: userName is not defined

のようなエラーが表示されます。

エラー内容を確認しながら原因を特定できます。

エラーメッセージの読み方については、

「JavaScript初心者が最初につまずく「エラーメッセージ」の読み方と対処法」

もおすすめです。

Device Toolbarでスマホ表示を確認する

画面上部のスマホアイコンを押すと、

スマートフォン表示へ切り替えられます。

確認できる内容

  • iPhone
  • Android
  • iPad
  • 画面幅変更
  • ズーム

レスポンシブデザインを作成するときは必ず利用します。

CSSメディアクエリの確認にも便利です。

Networkタブの使い方

Networkでは通信状況を確認できます。

例えば、

  • HTML
  • CSS
  • JavaScript
  • 画像
  • フォント

などが読み込まれているかを確認できます。

読み込みエラーを調べる

例えば画像が表示されない場合、

404

と表示されることがあります。

これはファイルが見つからないことを意味します。

CSSやJavaScriptが読み込まれない場合も同様です。

読み込み速度を確認する

Networkでは、

  • ファイルサイズ
  • 読み込み時間
  • 通信順序

なども確認できます。

サイト高速化にも役立つ機能です。

Sourcesタブとは？

SourcesではJavaScriptを詳しく調査できます。

初心者のうちは、

  • ブレークポイント
  • ステップ実行

などを利用する機会は少ないかもしれません。

JavaScriptに慣れてきたら覚えていくとよいでしょう。

よく使うショートカット

操作ショートカット
デベロッパーツールF12
デベロッパーツールCtrl + Shift + I
要素選択Ctrl + Shift + C
更新Ctrl + R
スーパーリロードCtrl + Shift + R

デベロッパーツールを使うメリット

デベロッパーツールを使うことで、

  • HTML構造が理解しやすい
  • CSSの適用状況が分かる
  • JavaScriptエラーを発見できる
  • レイアウト崩れを素早く確認できる
  • スマホ表示を簡単に確認できる
  • 通信エラーを見つけられる

など、多くの作業を効率化できます。

初心者が最初に覚えるべき機能

初心者の場合は次の順番で覚えるのがおすすめです。

  1. Elements
  2. CSS編集
  3. 要素選択
  4. Console
  5. Device Toolbar
  6. Network

この順番で学ぶと、Web制作で必要な確認作業を効率よく身につけられます。

まとめ

デベロッパーツールは、Web制作には欠かせないブラウザ標準の開発支援機能です。

最初は機能の多さに戸惑うかもしれませんが、Elements・Console・Device Toolbar・Networkの4つを中心に使い始めるだけでも十分役立ちます。

HTMLやCSSをその場で確認・編集しながら学習できるため、理解も深まりやすくなります。

Web制作の作業効率を高めるためにも、日頃からデベロッパーツールを活用する習慣をつけることをおすすめします。

関連記事