JavaScript
console.log を書いたのに何も表示されない
開発者ツールを開いていない
こんな症状
console.log() を書いたのに、ブラウザに何も表示されない。開発者ツールを開いていないときに起きるよ。
まず試す
F12（MacはCmd+Option+I）で開発者ツールを開き、「Console」タブを選ぶ。
js
<!-- スクリプトが読み込まれているか確認 -->
<script src="app.js" defer></script>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓開発者ツールを開いていない
→ F12（MacはCmd+Option+I）で開く。 - ✓Consoleタブが選ばれていない
→ 「Console」タブをクリックする。 - ✓そもそもスクリプトが動いていない
→ <script> の src パスが正しいか、Networkタブで404でないか確認する。
なぜ起きる？
console.log()はブラウザの画面ではなく開発者ツールのコンソールに表示されるよ。開発者ツールを開いていない、「Console」タブが選ばれていない、またはそもそもスクリプトファイルが読み込まれていない（パスミス）場合に「何も表示されない」状態になるよ。
✕ エラーが起きるコード
<script src="app.js"></script>
<!-- body の前に配置、DOM未構築 -->✓ 直したコード
<script src="app.js" defer></script>
<!-- defer で DOM 構築後に実行 -->✅ 直ったか確認
Consoleに console.log の内容が表示されればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
- Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
- 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
- 計算結果が NaN になる — 文字列を数値に変換していない
- TypeError: xxx is not a function — 関数でないものを呼び出している
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
- JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説