Console Loggerはすべてのコンソール出力（console.log、console.warn、console.error、console.info）をキャプチャし、ページ上のフローティングパネルに直接表示します。ブラウザのDevToolsを開かずに、JavaScriptエラー・デバッグメッセージ・警告をリアルタイムで確認できます。メッセージはタイプ別に色分けされ、エラーにはタイムスタンプとstack traceが含まれます。
コンソール出力を確認するためだけにブラウザのDevToolsを開くと、貴重な画面スペースを消費します。特に小さい画面や、ログを監視しながらページ全体を表示する必要がある場合には不便です。Console Loggerは軽量な代替手段を提供します。ページ上にオーバーレイされ、コンソール出力をリアルタイムで表示するフローティングパネルです。パネルはconsole.log、console.warn、console.error、console.infoと、完全なstack traceを含む未捕捉の例外をキャプチャします。メッセージは色分けされており（エラーは赤、警告は黄色、infoは青、ログは白/グレー）、イベントの発生時刻を追跡するためのタイムスタンプも含まれます。フィルターボタンで特定のメッセージタイプのみを表示できます。クラッシュのデバッグ時にはエラーのみ表示、非推奨の警告を探す際には警告のみ表示するといった使い方が可能です。パネルはドラッグ可能でリサイズでき、ページコンテンツの邪魔にならないよう半透明に設定されています。
コンソールメッセージは記録されると同時にリアルタイムで表示されます。ページの初期化ログ・APIレスポンス処理・ユーザーインタラクションイベント・エラーメッセージが、フローティングパネルにライブストリーミングされます。
エラーは赤、警告はアンバー/黄色、infoは青、標準ログは白/グレーで表示されます。重大なエラーと通常のログメッセージを色だけで瞬時に区別できます。
JavaScriptエラーには、ファイル名・関数名・行番号を含む完全なstack traceが表示されます。ファイル参照をクリックすることで、DevToolsを開かずにエラーの発生箇所を特定できます。
上部のフィルターボタンで特定のメッセージタイプの表示・非表示を切り替えられます：すべて・エラーのみ・警告のみ・infoのみ・ログのみ。各フィルターのカウントバッジにより、そのタイプのメッセージ数を確認できます。
すべてのメッセージに記録時刻（HH:MM:SS形式）が表示されます。イベントの順序を追跡したり、パフォーマンスの問題（APIコールとレスポンスの間隔）を特定したり、メッセージとユーザー操作を関連付けたりするのに役立ちます。
すべてのメッセージをクリアして新たに開始するか、ページを操作しながらメッセージを蓄積し続けることができます。パネルにはメッセージの合計数が表示され、不要なときは最小化できます。
ページ全体を表示したままコンソール出力を確認したい場合、Console LoggerはDevToolsパネルで画面スペースを取ることなくログを監視できます。小さい画面やプレゼンテーション中に最適です。
JavaScriptがAPIレスポンスをログに記録している場合、Console Loggerでリアルタイムに確認できます。ページとDevToolsを切り替えることなく、リクエスト/レスポンスデータを確認できます。
JavaScriptエラーの中には、UIに変化がなくコンソールにのみエラーが記録されるものがあります。Console Loggerはこれらをページ上に表示するため、通常のブラウジング中に気づくことができます。
ライブデモ中に、Console Loggerパネルを画面の隅に表示しておきます。何か問題が発生した場合、デモを中断してDevToolsを開くことなく、すぐにエラーメッセージを確認できます。
サードパーティスクリプト（アナリティクス・チャットウィジェット・広告ネットワーク）はエラーや警告をスローすることがよくあります。Console Loggerはこれらをキャプチャするため、外部依存関係の健全性を監視できます。
DevSuite Proのフローティングドックを開き、Console Loggerのアイコンをクリックします。フローティングパネルが表示され、コンソール出力のキャプチャがすぐに開始されます。
通常通りページを使用します（ボタンをクリック・ナビゲート・フォームを送信など）。ページのJavaScriptによってログが記録されると、コンソールメッセージがパネルに表示されます。
フィルターボタンを使用してエラー・警告・ログのみを表示します。カウントバッジで各タイプのメッセージ数を確認できます。
エラーメッセージのstack traceを展開して、エラーが発生したファイルと行番号を確認します。バグの発生源を特定するのに活用してください。
「クリア」をクリックしてパネルをリセットするか、ツールを無効化して閉じます。ページ上に痕跡は残りません。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
