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

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

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

Pete LePage

Robert Nyman

回報好的錯誤並不困難，但只要花一點工夫就能完成。目標是要實現輕鬆找到損毀的因素、找出根本原因，最重要的是解決問題快速進步的錯誤往往容易重現明確的預期行為

驗證錯誤

第一步是找出「正確」應採取何種做法

正確的行為為何？

查看 MDN 上的相關 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。
盡可能在瀏覽器的最新版本上測試本機檔案。
請嘗試將所有內容壓縮成 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)。請務必並附上所用測試環境的詳細資料。

提交錯誤

最後，提交錯誤。接著，請留意電子郵件是否出現回應錯誤。一般來說，在調查期間和修正錯誤時工程師可能有其他問題重現問題，對方可能會與你聯繫。