何時以及如何向瀏覽器報告 bug
瀏覽器是軟體,和所有軟體一樣,它們也會有 Bug。有時,您可能會發現您開發的網站行為異常,或者與 MDN 或規範等文件的說明不符。這可能表明是您的程式碼存在 Bug,文件存在 Bug(但願不是!),或者您用來測試網站的瀏覽器存在 Bug。在本文中,我們將討論如何找出問題所在,以及如果發現瀏覽器存在 Bug,該如何提交 Bug。
這是誰的 Bug?
在提交瀏覽器 Bug 之前,您應該確認這確實是瀏覽器本身的 Bug。問題可能源於四個地方:您的程式碼、文件、瀏覽器或規範。在向瀏覽器報告 Bug 之前,排除其他可能性非常重要。通常,規範是最權威的來源;瀏覽器和文件都遵循規範,但仍可能出錯。至於您的程式碼……嗯,在假設是瀏覽器 Bug 之前,重新檢查拼寫錯誤和邏輯錯誤總是有益的。
建立測試用例
識別問題根源的第一步是建立一個最小化的測試用例來重現 Bug。它應該儘可能小且獨立,最好是單個 HTML 檔案,包含內聯 CSS 和 JavaScript,沒有外部依賴或無關程式碼。這有兩個原因很有用:
- 它最大限度地減少了問題由您自己的程式碼或外部依賴項引起的可能性。
- 無論如何,如果您想與他人討論,都需要提供它——例如,在提交 Bug 時。
例如,以下是一個與 :autofill 偽類相關的 Bug 的良好測試用例。請注意,我們已將其精簡到最少,這意味著省略了最佳實踐,例如包含 doctype、<head> 和 <body> 標籤,或者輸入框的標籤。這沒關係,因為相關程式碼仍然存在。
<style>
:autofill {
border: 3px solid darkorange;
}
</style>
<input id="name" name="name" type="text" autocomplete="name" />
<input id="email" name="email" type="email" autocomplete="email" />
測試您的程式碼
您可以將 HTML 程式碼儲存在本地並透過測試伺服器提供服務,或者使用 JSFiddle 或 CodePen 等線上服務建立即時演示。
測試問題是否為瀏覽器 Bug 的最簡單方法是在多個瀏覽器中開啟您的測試用例。如果您在不同瀏覽器中遇到不同的行為,那很可能就是瀏覽器 Bug。
注意: 您可以採取其他步驟來隔離問題,例如在隱私視窗中測試、停用擴充套件程式或清除快取。在報告 Bug 之前,您也應該嘗試這些方法。
檢查實現狀態
首先,相信文件,並調查其行為與之不符的瀏覽器。並非所有意外行為都是 Bug。有時瀏覽器可能會實現尚未合併到規範中的功能或行為,因此不太可能被記錄。另一種可能性是,某個功能在規範中有所描述,但尚未在任何瀏覽器中實現,這也意味著它可能未被記錄。
此時,您應該檢視更多來源來確定實現情況。以下是一些可以查詢的地方:
- MDN 的瀏覽器相容性表格:在我們參考頁面的“瀏覽器相容性”部分(例如,請檢視
shape()CSS 函式頁面上的此部分),您將找到有關哪些瀏覽器支援某個功能以及支援程度的資訊。這可能表明您的目標瀏覽器尚未實現某個功能,或者僅部分實現(即,它存在已知的 Bug 或限制)。 - 規範儲存庫:標準機構,如 WHATWG(用於 DOM、HTML、fetch 等)、WHATWG、CSSWG(用於 CSS)和 TC39(用於 JavaScript),都在 GitHub 上公開協作。您可以檢查規範是否最近已更改,或者您正在測試的功能是否存在未解決的問題。
- 社群論壇:MDN 社群是一個很好的起點,其他 Web 開發論壇也是如此。這些地方很適合提問關於瀏覽器是否尚未實現某個功能,或者是否存在已知 Bug 的問題。
- 您正在測試的瀏覽器的 Issue Tracker:如果您發現與您的問題相關的 Issue 已被提交,那就證實了 Bug 的真實性,您無需再做其他事情。實際上,我們接下來將討論 Issue Tracker。
當然,即使所有瀏覽器都表現相同,它們可能都存在 Bug,或者可能只有一個瀏覽器實現了預期的行為。文件可能已過時或不正確。為了確定,您應該將規範視為真相的來源(除了瀏覽器在規範之前實現某些功能的罕見情況)。在每個 MDN 參考頁面上,您都可以在“規範”部分找到相關規範的連結(請參閱此示例)。閱讀規範以檢查應有的行為。有時規範可能很難理解,因為它們是為瀏覽器工程師準備的,但請盡力而為。
如果事實證明所有瀏覽器和規範都是一致的,但 MDN 錯了,請考慮貢獻!
瀏覽器 Bug 跟蹤器
每個瀏覽器都有自己的 Bug 跟蹤器,您可以在其中搜索現有 Bug 並提交新的 Bug。介面和流程一開始可能會感覺有些陌生,但通常會有說明。下表列出了主要瀏覽器的 Bug 跟蹤器:
| 瀏覽器 | Bug 跟蹤器 |
|---|---|
| Apple Safari | WebKit Bugzilla |
| Google Chrome | Chromium Issues |
| Mozilla Firefox | Mozilla Bugzilla |
| Opera | Opera Bug Wizard |
在提交新 Bug 之前,請搜尋現有的 Bug 報告。如果您找到與您的問題匹配的現有 Bug 報告,您可以新增評論並附上您的發現(例如,如果您找到了解決方法,或者您有關於該 Bug 的更多資訊)。但是,不要新增“我也發現了這個 Bug”之類的評論,因為它們並沒有真正增加價值。如果您找不到現有的 Bug,可以提交新的 Bug——如果它是重複的,會有人告訴您的。
在提交新 Bug 時,請確保包含您的最小化測試用例以及報告表中要求的任何其他資訊,例如瀏覽器版本、預期結果與實際結果以及螢幕截圖。某些 Bug 跟蹤器還可能要求您為 Bug 選擇元件或類別,例如渲染或網路。瀏覽器開發人員使用這些標籤來組織工作。如果您不確定該選擇哪個,請儘量猜測——如果需要,會有人重新分配的。
為非瀏覽器軟體提交 Bug
如果 Bug 與可能與瀏覽器整合的非瀏覽器軟體相關,您需要向相關軟體供應商提交 Bug。下表列出了一些輔助技術以及為其提交 Bug 的位置: