11. DevToolsで読み込みを確認する

この章では、DevToolsを使ってWebサイトの読み込み状況を確認する方法を学びます。

Web制作では、画面を見ただけでは原因がわからないトラブルがよくあります。

DevToolsを使うと、HTML、CSS、JavaScript、画像、通信エラーなどを確認できます。

DevToolsとは

DevToolsは、ブラウザに用意されている開発者向けの確認ツールです。

ChromeやEdgeでは、ページ上で右クリックして「検証」を選ぶと開けます。

DevToolsでは、次のようなことができます。

  • HTML構造を見る
  • CSSが効いているか確認する
  • JavaScriptエラーを見る
  • 読み込まれたファイルを確認する
  • ステータスコードを見る
  • スマホ幅の表示を確認する
  • キャッシュを無効化して確認する

Web制作では、見た目の確認だけでなく、DevToolsで裏側の状態を見る習慣が大切です。

Elementsタブ

Elementsタブでは、ブラウザ上に表示されているHTML構造を確認できます。

ここで見えるのは、元のHTMLファイルそのものではなく、ブラウザが解釈した後のDOMです。

Elementsタブでは、次のような確認ができます。

  • 要素が存在しているか
  • class名が付いているか
  • CSSがどの要素に当たっているか
  • JavaScriptで追加されたクラスが反映されているか
  • レイアウト崩れの原因になっている要素はどれか

CSSが効かない時は、対象要素を選択し、StylesパネルでどのCSSが当たっているか確認します。

Consoleタブ

Consoleタブでは、JavaScriptのエラーやログを確認できます。

JavaScriptが動かない時は、まずConsoleタブを見ます。

よく見るエラーには、次のようなものがあります。

エラーよくある原因
Cannot read properties of null対象要素が見つかっていない
is not defined変数や関数が定義されていない
Unexpected token記法ミスがある

Consoleにエラーが出ている場合、JavaScriptの処理が途中で止まっている可能性があります。

Networkタブ

Networkタブでは、ページが読み込んだファイルや通信を確認できます。

Web制作で特に重要なのは、CSS、JavaScript、画像が正しく読み込まれているかを見ることです。

Networkタブでは、次の情報を確認できます。

  • 読み込まれたファイルのURL
  • ステータスコード
  • ファイルの種類
  • ファイルサイズ
  • 読み込み時間
  • キャッシュから読み込まれたかどうか

画像が表示されない時やCSSが効かない時は、Networkタブで対象ファイルを探します。

ステータスコードを見る

Networkタブでは、各リクエストのステータスコードを確認できます。

コード意味
200正常に読み込まれた
301 / 302リダイレクトされた
403アクセス禁止
404見つからない
500サーバーエラー

CSSや画像が 404 になっている場合、パス指定やファイル配置に問題がある可能性が高いです。

500 の場合は、サーバー側の問題の可能性があります。

CSSやJSが読み込まれているか確認する

CSSが効かない時は、NetworkタブでCSSファイルを探します。

確認するポイントは次の通りです。

  • CSSファイルが一覧にあるか
  • ステータスコードが 200 か
  • 読み込まれているURLが想定通りか
  • 古いファイルを読んでいないか
  • ファイルサイズが極端に小さくないか

JavaScriptも同じように確認します。

JavaScriptは、Networkタブで読み込みを確認し、Consoleタブで実行時エラーを確認します。

画像の404を見つける

画像が表示されない時は、Networkタブで画像ファイルを確認します。

フィルターで Img を選ぶと、画像だけを見やすくできます。

404になっている画像があれば、そのURLを確認します。

よくある原因は次の通りです。

  • ファイル名が違う
  • ディレクトリ名が違う
  • ../ の数が違う
  • 本番にアップロードされていない
  • 大文字と小文字が違う

ブラウザが実際に探しているURLを見ると、修正すべきパスが見つかりやすくなります。

キャッシュを無効化して確認する

DevToolsを開いた状態で、Networkタブの Disable cache を有効にすると、キャッシュを使わずに読み込みを確認できます。

修正が反映されない時に役立ちます。

ただし、DevToolsを開いている間だけ有効になる挙動のブラウザもあります。

キャッシュの影響を切り分けたい時は、ハードリロードやシークレットウィンドウも併用します。

スマホ幅で確認する

DevToolsでは、スマホ幅の表示も確認できます。

レスポンシブ対応では、見た目だけでなく、次の点も確認します。

  • 横スクロールが出ていないか
  • メニューが操作できるか
  • ボタンが押しやすいか
  • 文字が小さすぎないか
  • 画像がはみ出していないか
  • JavaScriptがスマホでも動いているか

スマホ幅の見た目確認は大切ですが、最終的には実機でも確認できると安心です。

フォーム送信を見る

フォームがある場合、Networkタブで送信時の通信を確認できます。

送信ボタンを押した時に、どのURLへリクエストが送られているか、ステータスコードが何かを見ます。

フォームが送信できない時は、次の点を確認します。

  • action のURLが正しいか
  • method が想定通りか
  • 送信時にJavaScriptエラーが出ていないか
  • サーバーからエラーが返っていないか

フォームは、HTML、JavaScript、サーバー側処理が関係するため、切り分けが重要です。

この章のまとめ

  • DevToolsは、Web制作の確認に欠かせないツール
  • ElementsタブではHTML構造とCSSの適用状況を確認できる
  • ConsoleタブではJavaScriptエラーを確認できる
  • NetworkタブではCSS、JavaScript、画像、通信の読み込み状況を確認できる
  • ステータスコードを見ると、読み込み失敗の原因を切り分けやすい
  • キャッシュやスマホ表示の確認にもDevToolsが役立つ