如何回報良好的瀏覽器錯誤

向瀏覽器供應商回報您在瀏覽器中發現的問題，是改善網路平台不可或缺的一環。

Pete LePage
Robert Nyman

提交優質錯誤報告需要一些功夫。您的目標應是盡可能讓瀏覽器工程師輕鬆找出損壞的部分、找出根本原因，最重要的是找出修正方法。如果錯誤能快速重現，且有明確的預期行為，通常能快速解決。

確認是否為錯誤

首先，您必須找出「正確」的行為。

正確的行為為何？

請查看 MDN 上的相關 API 文件，或嘗試尋找相關規格。這項資訊可協助您判斷實際損壞的 API、損壞位置，以及預期行為。

在其他瀏覽器中是否能正常運作？

不同瀏覽器之間的行為差異通常會優先視為互通性問題，尤其是當含有錯誤的瀏覽器是特例時。請嘗試在最新版本的 Chrome、Firefox、Safari 和 Edge 上進行測試，建議使用 BrowserStack 等工具。

如果可以，請確認網頁不會因使用者代理程式探查而刻意採取不同行為。在 Chrome 開發人員工具中，嘗試將 User-Agent 字串設為其他瀏覽器。

是否在最近的版本中損壞？

這項功能過去是否能正常運作，但在最近的瀏覽器版本中故障？ 這類迴歸問題可以更快處理，尤其是當您提供正常運作的版本號碼和失敗的版本號碼時。您可以使用 BrowserStack 等工具，檢查舊版瀏覽器。使用 bisect-builds 工具 (適用於 Chromium) 等工具搜尋變更。

如果問題是迴歸且可以重現，通常可以快速找出根本原因並修正。

其他人是否也遇到相同問題？

如果您遇到問題，其他開發人員可能也遇到同樣的問題。首先，請嘗試在 Stack Overflow 上搜尋錯誤。這有助於將抽象問題轉化為特定損壞的 API，並在錯誤修正前找到短期解決方法。

之前是否曾回報過？

瞭解錯誤後，請搜尋瀏覽器錯誤資料庫，確認是否有人回報過。

如果找到描述問題的現有錯誤，請為錯誤加上星號、加入收藏或加上註解，表示支持。在許多網站上，你也可以將自己加入 CC 清單，並在錯誤變更時收到更新。

如果您決定對錯誤發表評論，請提供錯誤對網站影響的相關資訊。請避免新增「+1」樣式的留言，因為錯誤追蹤工具通常會為每則留言傳送電子郵件。

回報錯誤

如果先前未曾回報過這個錯誤，請向瀏覽器供應商回報。

建立精簡測試案例

Mozilla 有一篇很棒的文章，說明如何建立精簡測試案例。簡而言之，雖然問題說明是很好的起點，但最有效的做法是在錯誤中提供連結的示範，展示問題所在。為盡快取得進展，範例應盡可能只包含能重現問題的程式碼。提供精簡的程式碼範例，是提高錯誤修正機率的首要方法。

以下提供幾個精簡測試案例的訣竅：

  • 下載網頁，新增 <base href="https://original.url">，並確認錯誤存在於本機。如果網址使用 HTTPS，可能需要有效的 HTTPS 伺服器。
  • 請盡可能在多個瀏覽器的最新版本上測試本機檔案。
  • 請盡量將所有內容濃縮成 1 個檔案。
  • 移除程式碼 (從您知道不必要的內容開始)，直到錯誤消失。
  • 使用版本管控功能，即可儲存工作內容，並復原錯誤。

託管精簡測試案例

如要尋找適合託管精簡測試案例的地方，以下是幾個不錯的選擇：

請注意，其中有幾個網站會在 iframe 中顯示內容，這可能會導致功能或錯誤的行為有所不同。

回報問題

取得精簡測試案例後，即可回報錯誤。請前往正確的錯誤追蹤網站，建立新的問題。

新增清楚的說明和重現步驟

首先，請提供清楚的說明，協助工程師快速瞭解問題所在，並協助分類問題。

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

接著，請提供重現問題所需的詳細步驟，並說明「預期」和「實際」結果。

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

詳情請參閱 MDN 的錯誤報告撰寫指南。

額外資訊：新增問題的螢幕截圖或螢幕側錄

雖然並非必要，但通常建議您加入問題的螢幕截圖或螢幕側錄。如果錯誤是在多個步驟或不尋常的活動後發生，這項功能就特別實用。螢幕側錄和螢幕截圖通常能更清楚地向瀏覽器工程師說明發生的情況。

提供環境詳細資料

有些錯誤只能在特定作業系統或特定類型的螢幕 (例如低 DPI 或高 DPI) 上重現。請務必提供您使用的任何測試環境詳細資料。

提交錯誤

最後，提交錯誤。請留意電子郵件，查看錯誤的回覆。 在調查期間，工程師通常會提出其他問題。如果無法重現問題，可能會與您聯絡。