公開後の不具合をブラウザの開発者ツール(Console)で切り分ける手順

まず開発者ツールを開く

ほとんどのブラウザは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のエラーを一件ずつ直しては上げ直し、赤い行が消えるまで反復できます。関係者だけで切り分けたいときは認証を併用すると安全です。