背景

開発を進める中で、console.log が正しく出力されない現象に遭遇しました。コンソールにログが出力されないことで、デバッグが難しく、何が問題なのかを特定するのに時間がかかりました。最終的にはブラウザの開発者ツールの設定が原因だったことが判明したので、その解決方法を共有します。

問題

JavaScriptやjQueryを使った処理が動いているにもかかわらず、console.log が出力されないという現象が発生しました。以下のようなシンプルなログ出力でも、コンソールに何も表示されません。

console.log("処理が実行されました");

動作自体は正常に行われているものの、ログが表示されないため、原因の特定に時間がかかりました。

単語（検証ツール）について

開発中によく使用するブラウザの検証ツール（開発者ツール）には、さまざまなログを表示するための機能が備わっています。以下は検証ツールの主要なタブです。

・Console: console.log などの出力を確認する場所。
・Network: リクエストの送受信状況を確認できる。
・Sources: 実際に読み込まれているJavaScriptファイルを確認できる。

特にコンソールタブでは、ログの種類（Info、Warnings、Errorsなど）ごとにフィルタリングが可能です。このフィルタリングが今回の問題の原因となっていました。

試したこと

console.log が出力されない原因を探るために以下の方法を試しました。

・コードの再確認: console.log の位置などを確認しましたが問題はありませんでした。
・ブラウザのキャッシュをクリア: 最新のJavaScriptコードが正しく読み込まれているか確認しましたが、効果はありませんでした。
・他のブラウザでテスト: 複数のブラウザで同じコードをテストしましたが、どのブラウザでもログが出力されませんでした。
・ネットワークリクエストの確認: ネットワークリクエストは正常に動作していることが確認できました。

原因

最終的に、ブラウザの開発者ツールの「Console」タブの設定が原因でした。
console.log はデフォルトで「Info」レベルのログとして扱われていますが、開発者ツールの設定で「Info」がフィルタリングされていたため、console.log が表示されていませんでした。

解決策

解決策はシンプルです。開発者ツールの Consoleタブのフィルタリング設定を確認し、「Info」が無効化されていた場合は、これを有効化することで console.log のメッセージが再び表示されるようになります。

手順は以下の通りです：

・開発者ツールを開く（F12 キーなど）。
・Consoleタブを選択する。
・フィルタリングメニューを開き、「Info」にチェックを入れる（「Default」や「Verbose」に設定してもOK）。

・console.log が表示されることを確認。

まとめ

今回の問題の原因は、console.log が Infoレベルのログとして出力されていたにもかかわらず、開発者ツールで「Info」ログがフィルタリングされていたことでした。開発者ツールの設定は非常に便利ですが、フィルタリングによって一部のログが表示されなくなることがあるため、状況に応じて設定を確認することが重要です。

同様の問題に直面した方は、まず検証ツールの設定を見直してみることをお勧めします。特に「Info」フィルタが外れていないか確認してみてください。