本頁面由 Cloud Translation API 翻譯而成。

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

告知瀏覽器廠商在瀏覽器中發現的問題，是讓網路平台更臻完善的重要環節！

Pete LePage

Robert Nyman

回報好的錯誤並不困難，但只要花一點工夫就能完成。目標是輕鬆找出損壞的部分、找出根本原因，最重要的是找出解決方式。導致快速進度的錯誤很容易重現，但也應該要有明確的預期行為。

驗證錯誤

第一步是釐清應「正確」的行為。

正確的行為為何？

請參閱 MDN 上的相關 API 說明文件，或嘗試尋找相關規格。這項資訊有助於判斷哪個 API 實際損壞、毀損的 API，以及預期的行為。

其他瀏覽器也能使用這項工具嗎？

一般來說，如果行為不同，瀏覽器之間的行為會因為互通性問題而優先處理，尤其是當含有錯誤的瀏覽器為奇怪時。嘗試在最新版本的 Chrome、Firefox、Safari 和 Edge 上進行測試。您可以使用 BrowserStack 這類工具進行測試。

如果可以，請檢查網頁是否因為使用者代理程式探查而有不同的行為。在 Chrome 開發人員工具中，嘗試將 User-Agent 字串設為其他瀏覽器。

是否在最近推出的版本中失效？

這種做法在過去是否正常運作，但在最近的瀏覽器版本中無法運作？這種「迴歸」能更快採取行動，特別是如果您提供了可正常運作的版本號碼，以及發生錯誤的版本。BrowserStack 等工具可協助您輕鬆查看舊版瀏覽器，而 bisect-builds 工具 (適用於 Chromium) 則可讓搜尋變更的效率極高。

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

其他人遇到相同問題嗎？

如果您遇到問題，還有其他開發人員同樣可能。首先，請嘗試前往 Stack Overflow 搜尋錯誤。這或許能幫助您將抽象問題轉化為具體的 API，或許有助於在錯誤修正前找到短期的解決方法。

是否有人檢舉？

對錯誤有所瞭解後，接下來請搜尋瀏覽器錯誤資料庫，檢查是否已回報這個錯誤。

以 Chromium 為基礎的瀏覽器：https://crbug.com
Firefox：https://bugzilla.mozilla.org/
Safari 和 WebKit 瀏覽器：https://bugs.webkit.org/

如果您發現現有錯誤描述了問題，請將您的支援加上星號、收藏或評論錯誤。在許多網站上，您可以將自己加入副本清單，並在錯誤變更時取得最新資訊。

如果您決定針對錯誤提出意見，請說明該錯誤對網站的影響。請避免加入「+1」樣式註解，因為錯誤追蹤工具通常會傳送每則留言的電子郵件。

回報錯誤

如果您未曾回報過這項錯誤，則必須向瀏覽器廠商告知這個錯誤。

建立最小化測試案例

Mozilla 撰寫了一篇關於如何建立最小化測試案例的文章。為了讓故事更簡短，而描述問題是很好的開始，但不必在錯誤中示範問題的連結示範。為了盡可能提高快速進展的機會，範例應包含示範問題所需的最少程式碼。最簡潔的程式碼範例就是首要之務，就是要提高錯誤修正機率。

以下是盡量減少測試案例的幾個訣竅：

請下載網頁，新增 <base href="https://original.url">，驗證是否在本機上存在錯誤。如果網址使用 HTTPS，可能需要即時 HTTPS 伺服器。
盡可能在瀏覽器的最新版本上測試本機檔案。
請嘗試將所有內容壓縮成 1 個檔案。
移除程式碼 (以您知道的事物開頭)，直到錯誤消失為止。
使用版本管控功能，就能儲存工作並復原發生錯誤的項目。

代管壓縮測試案例

如果您想尋找代管壓縮測試案例的好地方，可以參考下列幾個好位置：

請注意，這些網站中有數個網站以 iframe 顯示內容，這可能會導致功能或錯誤行為不同。

回報問題

取得最小測試案例後，即可提交該錯誤。請前往正確的錯誤追蹤網站，建立新的問題。

以 Chromium 為基礎的瀏覽器 - https://crbug.com/new
Firefox：https://bugzilla.mozilla.org/
Safari 和 WebKit 瀏覽器 - https://bugs.webkit.org/

請詳細說明，以及重現問題所需的步驟

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

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

接下來，請提供重現問題所需的詳細步驟。這時就會用到精簡測試案例。

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

最後說明「預期」和「實際」結果。

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 上的錯誤報告撰寫指南。

額外步驟：新增問題的螢幕截圖或螢幕側錄

雖然並非必要，但在部分情況下，附上問題的螢幕截圖或螢幕側錄可能會有幫助。如果錯誤可能需要某些複雜步驟才能重現，這個方法就特別實用。通常像是在螢幕側錄或螢幕截圖中查看活動情形。

包含環境的詳細資料

有些錯誤只能在特定作業系統或特定顯示器 (例如 low dpi 或 high-dpi) 上重現。請務必附上您使用的任何測試環境的詳細資料。

提交錯誤

最後，提交錯誤。之後，請留意電子郵件，查看錯誤的回應。一般而言，在調查期間和修正錯誤時，工程師可能會想詢問其他問題，或者如果無法重現問題，他們可能會與我們聯絡。