console.logが表示されない場合の対処法を解説！
JavaScriptで使用されるデバッグ方法としてconsole.logがあります。そのconsole.logが表示されなくなったら、デバッグができなくなって困ります。ですが、表示されない原因は意外と単純だったりします。この記事ではその対処法を解説しています。
console.logが表示されない
JavaScriptでデバッグする方法の１つでよく使われるconsole.logがあります。
そんなconsole.logが突然表示されないとなったら、デバッグができなくなってすごく焦りますよね。
ここでは原因別にその対処法を解説していきます。
console.logが表示されない場合の対処法
表示される場所を勘違いしている
まずは今までconsole.logを使ったことがなく、どこに表示されるか分からないが故にconsole.logでログが出ないと勘違いしているパターンです。
console.logではブラウザに文字列出力されるわけではありません。
では、どこに出力されるのかというとディベロッパーツールで確認することができます。
ブラウザがGoogle Chromeの場合は画面の右上にある縦に３つの丸が並んでいるところをクリックして、「その他のツール」の中に「デベロッパーツール」がありますので、そちらをクリックすることで開くことができます。
また、Windowsなら「Ctrl」+「Shift」+ I のショートカットで、Macなら「Command」+「Option」+ I のショートカットでもデベロッパーツールを開くことができます。
すると上のようなデベロッパーツールが開きます。そこに複数のタブが存在します。
そこに「Console」というタブがあります。そこをクリックした場所にconsole.logで実行したログが出力されます。
エラーのみ表示するようになっている
デベロッパーツールの左側で表示するメッセージの種類を切り替えることができます。
console.logでHello Worldという文字列を出力していますが、「error」などが選択されているとHello Worldという文字列が出ない状態となります。
Hello Wordという文字列が出なくなりましたね。「message」を選ぶと全て表示される状態となるので、基本的にはこちらを選択しておきましょう。
Filterが有効になっている
デベロッパーツールではメッセージの種類を切り替えることができるだけでなく、Filterという機能で表示するメッセージを絞り込むことができ、検索機能として使うことができます。
Filterの欄に文字列を入力することで絞り込みを行うのですが、これが入力されたままになっていることでconsole.logで表示されていない状態となっていないかもしっかり確認しましょう。
「hoge」という文字列を含むメッセージは存在しないので、メッセージが一切表示されていない状態となっていることが確認できます。
大量のログの中で見落としている
大量のエラー文が発生していたり、console.logで表示するログが多い場合には該当のログが見つからないというパターンもあるでしょう。
そういった場合は前述したメッセージの種類を絞り込んでみたり、Filterで検索をかけてみるのも良いでしょう。
まとめ
console.logが表示されない原因とその対処法を解説してきました。意外と単純な理由である場合が多かったのではないでしょうか？
期待された表示がされていない場合は、１つずつ確認してみてくださいね。
