今回やること
この記事では、DevToolsのConsoleに出るJavaScriptエラーを読む順番を整理します。
Consoleは、JavaScriptがどこで止まったかを見る場所です。
Step 1: エラーを怖がらず分解する
Consoleの赤いエラーは長く見えますが、見る場所は決まっています。
例:
TypeError: Cannot read properties of null (reading 'addEventListener')
at main.js:12:8
まず次の4つに分けます。
| 部分 | 意味 |
|---|---|
| TypeError | エラーの種類 |
| Cannot read… | 何が起きたか |
| main.js | どのファイルか |
| 12:8 | 何行目・何文字目か |
Step 2: エラー名を見る
よく見るエラー名:
| エラー名 | よくある原因 |
|---|---|
| TypeError | 値の型や中身が想定と違う |
| ReferenceError | 変数が存在しない |
| SyntaxError | 文法が間違っている |
| RangeError | 範囲外の値を使った |
エラー名だけで原因が決まるわけではありませんが、調査の入口になります。
Step 3: メッセージを読む
次に、エラーメッセージを読みます。
Cannot read properties of null
これは、null に対して何かを読もうとしたという意味です。
よくある例:
const button = document.querySelector("#submit");
button.addEventListener("click", () => {});
#submit が画面に存在しなければ、button は null になります。その状態で addEventListener を呼ぶとエラーになります。
Step 4: 行番号へ飛ぶ
Consoleのエラーには、ファイル名と行番号が表示されます。
main.js:12
クリックするとSourcesパネルで該当行へ移動できます。
確認すること:
- その行で何をしているか
- 変数の中身は想定通りか
- DOM要素は存在するか
- APIレスポンスの形は想定通りか
Step 5: stack traceを見る
複数行のエラー表示は、呼び出し履歴を表していることがあります。
at handleClick (main.js:20)
at HTMLButtonElement.<anonymous> (main.js:35)
上から下へ「どこでエラーが起きたか」「どこから呼ばれたか」を確認します。
最初は一番上の自分のコードを見ることが多いです。ライブラリ内部の行が出ている場合も、原因は自分の渡した値にあることがあります。
Step 6: console.logで確認する
原因が分からない場合は、該当行の前に console.log を置きます。
const button = document.querySelector("#submit");
console.log(button);
null と表示されたら、セレクタかHTML側を確認します。
ただし、調査が終わったら不要な console.log は消します。
よくあるパターン
| エラー | よく見る場所 |
|---|---|
Cannot read properties of null | DOM要素がない |
is not defined | 変数名・import忘れ |
Unexpected token | 文法ミス、JSONではないレスポンス |
Failed to fetch | API URL、CORS、Network |
実践メモ: Consoleのエラーは、全文を貼るより「エラー名、メッセージ、ファイル名、行番号」を分けて整理すると質問しやすくなります。
まとめ
Consoleのエラーは、エラー名、メッセージ、ファイル名、行番号、stack traceの順に読みます。
JavaScriptが動かない時は、まずConsoleを開き、該当行の変数やDOM要素を確認します。Networkの失敗が原因でConsoleにエラーが出ることもあるため、必要に応じてNetworkも合わせて見ます。
