---
title: "公開後の不具合をブラウザの開発者ツール(Console)で切り分ける手順"
description: "公開後のページが思い通りに動かず、勘で直し続けて時間を溶かしているWeb制作者向け。F12で開くConsoleとNetworkタブを使って「何が・どこで」失敗しているかを10分以内に切り分けるための基礎的な手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/console-error-debug-published"
markdown: "https://giga-site.com/articles/console-error-debug-published/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 公開後の不具合をブラウザの開発者ツール(Console)で切り分ける手順

公開したページが思ったように動かないとき、勘で直し続けると時間ばかり溶けます。ブラウザの開発者ツールを開けば、何が失敗しているかをブラウザ自身が教えてくれます。この記事では、F12のConsoleとNetworkを使って原因を切り分ける基礎手順をまとめます。

> Source HTML: https://giga-site.com/articles/console-error-debug-published
> Article index: https://giga-site.com/articles/index.md

## まず開発者ツールを開く

ほとんどのブラウザはF12、またはCtrl/Cmdとオプションキーを組み合わせたショートカットで開発者ツールが開きます。最初に見るべきはConsoleタブとNetworkタブの2つです。Consoleはコードの実行時エラー、Networkはファイル取得の成否を映します。

不具合に出会ったら、まずページを再読み込みして、その瞬間にConsoleへ赤い行が出るかを見ます。赤はエラー、黄色は警告です。エラーの一行目に書かれたメッセージが、原因のもっとも短い説明になっていることが多いです。

## Consoleのエラーメッセージを読む

エラーには種類があり、メッセージの最初の単語で見当が付きます。たとえば未定義のものを使ったときの参照エラー、型が合わないときのエラー、構文の誤りなどです。メッセージの右側にはファイル名と行番号が出るので、どこで止まったかをすぐ追えます。

重要なのは、最初に出たエラーから順に直すことです。一つ目の失敗で以降の処理が連鎖的に止まり、二つ目以降は巻き添えのエラーであることが多いからです。上から一件ずつつぶすと、無関係なエラーが一気に消えることがあります。

エラー行をクリックするとソースの該当箇所にジャンプできます。文字化けや想定外のnull、外部ライブラリが読めていないなど、現物を見て初めて分かる手掛かりが得られます。

## 症状別チェック表

公開後の不具合をブラウザの開発者ツール(Console)で切り分ける手順は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## Networkタブで取得失敗を見つける手順

Consoleに「読み込めない」「取得に失敗」といったメッセージが出るときは、ファイルそのものが取れていない可能性が高いので、Networkタブで裏取りします。

1. Networkタブを開いた状態でページを再読み込みする
2. ステータス列を見て、200以外（404や403、赤字）の行を探す
3. その行のNameとURLで、どのファイルが失敗したか特定する
4. 失敗したファイルのパスが実際の配置と一致しているか確認する
5. Typeやステータスから、パスの問題か権限の問題かを切り分ける

## よくあるパターンと当たりの付け方

赤いConsoleエラーで「is not defined」と出るなら、読み込み順や綴り間違いを疑います。Networkで404が並ぶなら相対パスのずれ、403なら配置や権限、Mixed Contentの警告ならhttpとhttpsの混在です。メッセージの文言から原因の分類に当てはめると、調べる範囲が絞れます。

それでも分からないときは、エラーメッセージをそのまま検索すると同じ症状の解説が見つかります。自分の状況に固有の値（ファイル名など）を外し、エラーの型と一般的な文言で探すのがコツです。

## 本番に近い環境で確認しながら直す

ローカルでファイルを直接開いた状態と、公開後の状態では、パスの解釈やCORSの扱いが変わることがあります。開発者ツールでの確認は、できるだけ公開後の環境で行うと、本番でしか出ない不具合を取りこぼしません。

ギガサイト便にHTMLやZIPをドロップすると 〇〇.giga-site.com の共有URLが発行され、本番に近い条件で開発者ツールを使った検証ができます。同じURLのまま中身を差し替えられるので、Consoleのエラーを一件ずつ直しては上げ直し、赤い行が消えるまで反復できます。関係者だけで切り分けたいときは認証を併用すると安全です。

## よくある質問

### ConsoleとNetworkのどちらを先に見ればよいですか

まずConsoleで赤いエラーの有無を見ます。エラー文に取得失敗を示す言葉が含まれていたら、Networkタブで該当ファイルのステータスを確認すると、コードの問題かファイル取得の問題かを切り分けられます。

### エラーが大量に出ていてどこから手を付ければよいか分かりません

一番上、つまり最初に出たエラーから直してください。最初の失敗で後続が連鎖的に止まることが多く、根本を直すと巻き添えのエラーがまとめて消えることがあります。

### ステータスの200や404は何を意味しますか

200は取得成功、404はファイルが見つからない、403はアクセスが拒否されたことを示します。404が多ければパスのずれ、403なら配置や権限を疑うと当たりが付けやすくなります。

### エラーの意味がどうしても分かりません

エラーメッセージから自分固有のファイル名などを除き、エラーの型と一般的な文言で検索すると、同じ症状の解説が見つかりやすいです。該当行をクリックしてソースを直接見るのも有効です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [CORSエラーで外部データが読めないときの対処](https://giga-site.com/articles/cors-error/index.md)
- [type="module"のJSが読み込めない・CORSで止まるときの対処](https://giga-site.com/articles/module-script-cors-error/index.md)
- [外部JSONの読み込みでパースエラーになるときの確認点](https://giga-site.com/articles/json-fetch-parse-error/index.md)
- [公開URLにアクセスできない・404になるときの確認点](https://giga-site.com/articles/cannot-access-published-url/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "公開後の不具合をブラウザの開発者ツール(Console)で切り分ける手順",
  "description": "公開後のページが思い通りに動かず、勘で直し続けて時間を溶かしているWeb制作者向け。F12で開くConsoleとNetworkタブを使って「何が・どこで」失敗しているかを10分以内に切り分けるための基礎的な手順を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/console-error-debug-published",
  "url": "https://giga-site.com/articles/console-error-debug-published",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ConsoleとNetworkのどちらを先に見ればよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まずConsoleで赤いエラーの有無を見ます。エラー文に取得失敗を示す言葉が含まれていたら、Networkタブで該当ファイルのステータスを確認すると、コードの問題かファイル取得の問題かを切り分けられます。"
      }
    },
    {
      "@type": "Question",
      "name": "エラーが大量に出ていてどこから手を付ければよいか分かりません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一番上、つまり最初に出たエラーから直してください。最初の失敗で後続が連鎖的に止まることが多く、根本を直すと巻き添えのエラーがまとめて消えることがあります。"
      }
    },
    {
      "@type": "Question",
      "name": "ステータスの200や404は何を意味しますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "200は取得成功、404はファイルが見つからない、403はアクセスが拒否されたことを示します。404が多ければパスのずれ、403なら配置や権限を疑うと当たりが付けやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "エラーの意味がどうしても分かりません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "エラーメッセージから自分固有のファイル名などを除き、エラーの型と一般的な文言で検索すると、同じ症状の解説が見つかりやすいです。該当行をクリックしてソースを直接見るのも有効です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```