ブラウザコンソールログの表示と保存方法

ウェブサイトでエラーが表示されたり、ボタンが機能しなかったり、ページが予期しない動作をしたりした場合、ブラウザのコンソールにはJavaScriptのエラー、警告、およびネットワーク関連のメッセージが表示されることがあります。Chromeやその他のChromiumベースのブラウザでは、これらのメッセージを開発者ツールで確認し、プレーンテキスト.logファイルとして保存してサポートチームと共有できます。コンソールにはすべてのリクエストとレスポンスの完全な記録が保存されるわけではありません。詳細なリクエストヘッダー、レスポンスボディ、またはタイミング情報が必要な場合は、ネットワークパネルを使用してください。

1. ブラウザのコンソールを開きます

1. 問題が発生しているページを開いてください。
2. 開発者ツールを開きます。Windows または Linux の Chrome では、F12またはCtrl+ Shift+を押しますI。macOS では、Command+ Option+を押します。ブラウザのメニューを開いて、 [その他のツール] > [開発者ツール]Iを選択することもできます。
3. 「コンソール」タブを選択してください。DevToolsがサイドパネルまたはボトムパネルに開いた場合は、そのままにしておくか、DevToolsメニューを使用してドッキング位置を変更できます。

Microsoft Edgeでも同様のワークフローが採用されています。Windowsでは、F12またはCtrl+ Shift+でDevToolsを開きI、「コンソール」を選択します。キーボードショートカットはブラウザ、オペレーティングシステム、キーボード設定によって異なる場合がありますが、ブラウザのメニューも信頼できる代替手段です。

2. 問題を再現し、正しいメッセージを保持する

コンソールが表示されている状態で、問題が発生する操作（フォームの送信、該当ボタンのクリック、サインイン、ページの再読み込みなど）を繰り返してください。赤いエラーメッセージと黄色の警告を探してください。スタックトレースや詳細情報が必要な場合は、エントリを展開してください。コンソールのフィルタまたはメッセージレベルのコントロールを使用して表示を絞り込むことができますが、ログ全体を表示する必要がある場合は、保存する前にフィルタを解除してください。

ナビゲーション中もログを保持しましょう。通常のページナビゲーションではコンソールがクリアされることがあります。Chromeでは、コンソール設定を開き、「ログを保持」を有効にしてから問題を再現してください。Edgeにも同様の「ログを保持」設定があります。これは、クリックによって別のページにリダイレクトされる場合や、リロード中にエラーが発生する場合に特に役立ちます。

XMLHttpRequestコンソールでフェッチアクティビティを具体的に確認する必要がある場合は、Chrome DevTools の「XMLHttpRequests をログに記録する」設定を使用できます。これにより、リクエストが発生するたびにログに追加されますが、より詳細なリクエストレベルの検査を提供するネットワーク パネルの代わりにはなりません。

3. コンソール出力をファイルに保存する

1. 問題を再現した後、コンソール内の空いている領域またはメッセージを右クリックします。
2. 「名前を付けて保存」を選択してください（ブラウザのバージョンによって表示が若干異なる場合があります）。
3. 保存先のフォルダとファイル名を選択し、ログを保存してください。
4. 生成されたファイルをメモ帳などのテキストエディタで開く.logか、必要に応じてサポートリクエストに添付してください。

Chromeでは、対応バージョンではコンソールのコンテキストメニューに「コピー」または「コンソールをコピー」というオプションがあり、短い抜粋を作成するのに便利です。ただし、出力が長い場合は保存する方が通常は良いでしょう。エクスポートされるファイルには、コンソールで現在利用可能なメッセージのみが含まれており、ブラウザのすべてのトラフィックの完全なアーカイブや、入力したコマンドの履歴が必ずしも含まれるわけではありません。

4. 問題がネットワーク要求に関係する場合

コンソール出力は、JavaScript の例外や一部の読み込み失敗の解決に役立ちますが、API 呼び出しが失敗した理由を説明できない場合があります。DevToolsの [ネットワーク]タブを開き、問題を再現して、該当するリクエストを選択し、ステータス コード、リクエスト ヘッダーとレスポンス ヘッダー、ペイロード、およびタイミングを確認してください。サポート チームからネットワーク キャプチャを求められた場合は、[ネットワーク] パネルのエクスポート オプションを使用して HAR ファイルを保存し、機密データを含めるかどうかについてチームの指示に従ってください。HAR ファイルには、Cookie、認証ヘッダー、URL、または送信されたフォーム データが含まれている可能性があるため、共有する前にファイルを確認および削除してください。

トラブルシューティングのヒント

• コンソールが空の場合： DevToolsを開いた後に問題を再現し、メッセージレベルがフィルタリングされていないことを確認し、必要に応じて再読み込みしてください。
• リンクをクリックするとメッセージが消えてしまう場合は、まず「ログの保持」を有効にしてから、手順を繰り返してください。
• 404エラーやその他のネットワークエラーが表示された場合は、ネットワークで該当するリクエストを確認してください。コンソールメッセージだけでは、完全なレスポンスが表示されない場合があります。
• この問題は特定のブラウザでのみ発生します。各ブラウザで個別にログを収集し、ブラウザのバージョン、オペレーティングシステム、ページのURL、および再現手順を記録してください。
• 保存されたファイルが不完全なようです。コンソールがフィルタリングされていないこと、およびログ記録を有効にした後に問題が再現したことを確認してください。より低レベルの接続診断が必要な場合は、コンソールログにすべてのネットワークデータが含まれていると想定するのではなく、サポートにどのキャプチャ形式が必要かを確認してください。

公式ドキュメント

• Chrome DevTools: コンソール機能リファレンスでは、メッセージの保存、ログの保持、フィルタリング、およびFetch/XHRアクティビティのログ記録について説明しています。
• Microsoft Edge DevTools: コンソールの概要では、コンソールの開き方と使用方法について説明します。
• Cloudflare サポート: トラブルシューティングのための情報収集では、診断ログを収集するためのブラウザ固有の手順が説明されています。