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

向瀏覽器供應商回報在瀏覽器中發現的問題,是改善網路平台的必要步驟。

回報一個好錯誤,但需要多花一點工夫。您的目標應該是讓瀏覽器工程師能輕鬆找出問題所在、找出根本原因,以及最重要的,找出修正方法。導致快速進展的錯誤通常可以快速重現,且有明確的預期行為。

確認是否為錯誤

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

正確的行為為何?

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

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

瀏覽器之間的行為差異通常會被視為互通性問題,因此優先順序較高,特別是當含有錯誤的瀏覽器是少數情況時。請嘗試在最新版本的 Chrome、Firefox、Safari 和 Edge 上進行測試,建議使用 BrowserStack 等工具。

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

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

這個問題是否在過去運作正常,但在最近的瀏覽器版本中發生問題?這類回歸問題的處理速度會大幅提升,尤其是當您提供正常運作版本和失敗版本的版本號碼時。您可以使用 BrowserStack 等工具檢查舊版瀏覽器。使用 bisect-builds 工具 (適用於 Chromium) 等工具搜尋變更。

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

其他人是否遇到同樣的問題?

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

是否曾回報過這個問題?

一旦您瞭解錯誤為何,就該搜尋瀏覽器錯誤資料庫,確認是否有人已回報該錯誤。

如果您發現描述問題的現有錯誤,請為該錯誤加上星號、加入收藏或留言,表達您的支持。在許多網站上,您可以將自己加入CC 名單,並在錯誤發生變化時收到更新通知。

如果您決定對錯誤提出意見,請附上錯誤對網站的影響。請勿加入「+1」類型的註解,因為 Bug Tracker 通常會針對每則註解傳送電子郵件。

回報錯誤

如果先前未曾回報這個錯誤,現在是時候向瀏覽器供應商回報了。

建立最小化測試案例

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

額外資訊:新增問題的螢幕截圖或螢幕錄影

雖然不強制規定,但建議您附上問題的螢幕截圖或螢幕側錄。如果完成數步驟或發生異常活動後發生錯誤,這項功能就特別實用。螢幕錄影和螢幕截圖通常能更清楚地說明瀏覽器工程師遇到的問題。

納入環境詳細資料

有些錯誤只能在特定作業系統或顯示器類型 (例如低 DPI 或高 DPI) 上重現。請務必附上您使用的所有測試環境詳細資料。

提交錯誤

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