如何查看和儲存瀏覽器控制台日誌

當網站顯示錯誤、按鈕無回應或頁面行為異常時，瀏覽器控制台可以顯示 JavaScript 錯誤、警告以及一些網路相關訊息。在 Chrome 和其他基於 Chromium 核心的瀏覽器中，您可以在開發者工具中查看這些訊息，並將其儲存為純文字.log檔案以便與支援團隊共用。控制台並非記錄所有請求和回應的完整資訊；如果您需要詳細的請求頭、回應正文或時間訊息，請使用「網路」面板。

1. 開啟瀏覽器控制台

1. 開啟出現問題的頁面。
2. 開啟開發者工具。在 Windows 或 Linux 系統的 Chrome 瀏覽器中，按F12或Ctrl+ Shift+ I。在 macOS 系統中，按Command+ Option+ I。您也可以開啟瀏覽器選單，選擇「更多工具」 > “開發者工具”。
3. 選擇“控制台”標籤。如果開發者工具在側邊欄或底部面板中打開，您可以將其保留在那裡，也可以使用開發者工具選單變更其停靠位置。

Microsoft Edge 的工作流程類似。在 Windows 系統中，使用快速鍵F12或Ctrl+Shift鍵開啟開發者工具I，然後選擇「控制台」。鍵盤快捷鍵可能因瀏覽器、作業系統和鍵盤設定而異；瀏覽器選單也是可靠的替代方案。

2. 重現問題並保留正確的訊息

啟用控制台後，重複觸發問題的操作：提交表單、點擊受影響的按鈕、登入或重新載入頁面。尋找紅色錯誤訊息和黃色警告。需要查看堆疊追蹤或其他詳細資訊時，展開對應條目。使用控制台篩選器或訊息層級控制項縮小顯示範圍，但如果需要完整的日誌，請在儲存前移除篩選器。

保留導覽日誌：正常的頁面導覽可能會清除控制台日誌。在 Chrome 瀏覽器中，開啟控制台設定並啟用「保留日誌」功能，然後重現問題。 Edge 瀏覽器也提供類似的「保留日誌」設定。當點擊重定向到另一個頁面或故障發生在頁面重新載入期間時，此功能尤其有用。

如果您需要XMLHttpRequest在控制台中查看 Fetch 活動，Chrome 開發者工具提供了一個「記錄 XMLHttpRequests」設定。此設定會在請求發生時將其記錄下來，但它並不能取代「網路」面板，後者提供了更全面的請求級檢查。

3. 將控制台輸出儲存到文件

1. 重現問題後，右鍵單擊控制台中的空白區域或訊息。
2. 選擇「另存為…」（不同瀏覽器版本措詞可能略有不同）。
3. 選擇資料夾和檔案名，然後儲存日誌。
4. .log請使用記事本等文字編輯器開啟產生的文件，或根據要求將其作為附件新增至您的支援請求中。

在 Chrome 瀏覽器中，「控制台」上下文功能表在支援的版本中還包含「複製」或「複製控制台」選項，方便您提取少量內容。對於較長的輸出，通常建議保存。匯出的檔案包含目前控制台中顯示的訊息，而不是所有瀏覽器流量的完整存檔，也不一定包含您輸入的命令記錄。

4. 當問題涉及網路請求時

控制台輸出有助於發現 JavaScript 異常和某些載入失敗的情況，但可能無法解釋 API 呼叫失敗的原因。開啟開發者工具中的「網路」標籤，重現問題，然後選擇相關請求，檢查其狀態碼、請求和回應標頭、有效負載和時間。如果支援團隊要求提供網路抓包，請使用「網路」面板的匯出選項儲存為 HAR 文件，並遵循團隊的指示，確定是否需要包含敏感資料。 HAR 檔案可能包含 cookie、授權標頭、URL 或已提交的表單數據，因此在共用檔案之前，請務必檢查並清理該檔案。

故障排除技巧

• 控制台為空：開啟 DevTools 後重現此問題，檢查訊息等級是否已過濾，如果適當則重新載入。
• 點擊連結後訊息消失：請先啟用“保留日誌”，然後重複上述步驟。
• 如果您看到 404 或其他網路錯誤：請在「網路」中檢查對應的請求；僅憑控制台訊息可能無法顯示完整的回應。
• 此問題僅在一個瀏覽器中出現：請在每個瀏覽器中收集單獨的日誌，並記錄瀏覽器版本、作業系統、頁面 URL 以及重現問題的確切步驟。
• 儲存的檔案似乎不完整：請確認控制台未被過濾，且問題在啟用日誌記錄後是否重現。如果您需要更底層的連接診斷訊息，請諮詢技術支援人員所需的擷取格式，而不是想當然地認為控制台日誌包含所有網路資料。

官方文件

• Chrome DevTools：控制台功能參考解釋了保存訊息、保留日誌、過濾和記錄 Fetch/XHR 活動。
• Microsoft Edge DevTools：控制台概述如何開啟和使用控制台。
• Cloudflare 支援：收集網站故障排除訊息，提供針對特定瀏覽器的診斷日誌收集步驟。