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

將在瀏覽器中發現的問題告知瀏覽器廠商,是改善網路平台的重要環節!

回報錯誤並非易事,但需要付出一些心力。您的目標是要輕鬆找出有什麼問題並解決根本原因,最重要的是找出解決問題的方法。加快進展速度的錯誤通常很容易重現,且預期行為會明確。

確認是否為錯誤

首先,找出「正確」行為。

正確的做法為何?

查看 MDN 上的相關 API 說明文件,或嘗試尋找相關規格。這項資訊有助於您判斷哪個 API 確實毀損、在何處故障,以及預期的行為。

可以在其他瀏覽器中使用嗎?

瀏覽器出現不同行為時,通常會優先考慮互通性問題,尤其是當含有錯誤的瀏覽器出現差異時。請嘗試使用最新版的 Chrome、Firefox、Safari 和 Edge 進行測試 (可能使用 BrowserStack 等工具)。

可以的話,請確認網頁是不是因為使用者代理程式而遭到刻意變更。在 Chrome 開發人員工具中,請嘗試User-Agent 字串設為其他瀏覽器

最近發布的版本是否中斷?

過去是否可正常運作,但在最近的瀏覽器版本中損毀?您可以更快地回應這類「迴歸」問題,特別是如果您提供用於運作的版本號碼與失敗的版本,更是如此。BrowserStack 等工具可讓您輕鬆檢查舊版瀏覽器,而 bisect-builds 工具 (適用於 Chromium) 可用於搜尋變更。

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

其他人是否看到相同問題?

如果遇到問題,還有其他開發人員可能也有相同的問題。首先,請試著在 Stack Overflow 中搜尋錯誤。 這可能有助於將抽象問題轉譯成特定無效 API,也有助於在錯誤修正前找出短期的解決方法。

是否曾經回報過?

找出錯誤後,您可以搜尋瀏覽器錯誤資料庫,確認是否已回報錯誤。

如果您找到可說明問題的現有錯誤,請將錯誤加上星號、加入收藏或評論該錯誤,以提供支援。此外,在許多網站上,您可以將自己加入副本清單,並在錯誤變更時接收更新通知。

如果您選擇評論錯誤,請附上相關資訊,說明該錯誤對網站造成的影響。避免新增「+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 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) 上重現。請務必提供您使用的測試環境的詳細資料。

提交錯誤

最後,請提交錯誤。接著,別忘了留意電子郵件,查看錯誤的任何回應。一般而言,在調查過程中及修正錯誤時,工程師可能會提出其他問題,或者如果無法順利重現,也可以聯絡他們。