Chromeで開発者ツールを使いWordPressページのステータスコードを確認する方法

この記事では、Google Chrome の開発者ツールを使って、WordPressのページやリソース（CSS・画像・JS）が正しく読み込まれているか、ステータスコードを確認する方法を解説します。

1 ステップ1：開発者ツールを開く

• Chromeで対象ページにアクセス
• キーボードで F12 を押す、またはページ上で右クリック → 「検証」を選択
• 画面右側または下部に開発者ツールが表示される

2 ステップ2：Networkタブを開く

開発者ツールの上部にある Network（ネットワーク） タブをクリックします。

このタブでは、ページ読み込み時にブラウザがリクエストしたすべてのファイル（HTML, CSS, JS, 画像など）が一覧で表示されます。

3 ステップ3：ページを再読み込みする

Networkタブを開いた状態で F5 を押してページを再読み込みします。

これにより、すべてのリクエストがキャプチャされます。

4 ステップ4：対象のリクエストを探す

• 一覧の「Name」列から、確認したいページやファイルを探す（例：random_posts や style.css）
• 見つからない場合は、検索ボックスにファイル名を入力して絞り込む

5 ステップ5：ステータスコードを確認する

リストの「Status」列に数字が表示されます。

• 200 → 正常に読み込まれた
• 301 → 永久リダイレクト
• 302 → 一時リダイレクト
• 404 → ファイルが存在しない

Status列が見えない場合は、対象のリクエストをクリックし、右側のパネルの Headers（ヘッダー） タブで Response HeadersHTTP/1.1 200 OK

6 ステップ6：リダイレクト先の確認

もしステータスが 301 や 302 の場合、Headers 内の Location を確認すると、どのURLにリダイレクトされているか分かります。

7 補足ポイント

• CSSや画像が404になっている場合、表示崩れや機能不具合の原因になる
• 302が出る場合は、一時リダイレクトなのでSEOやクロールに軽微な影響がある
• 問題があれば、テーマ・プラグイン・サーバー設定を確認し修正する

8 まとめ

Chromeの開発者ツールを使えば、WordPressのページやリソースの読み込み状況を簡単に確認できます。
ステータスコードを確認することで、404や302の原因を特定し、適切に修正することが可能です。