以 Firefox 開發者工具在 GitHub 上除錯 fetch()

Firefox 每夜更新版 (Nightly) 最近剛加入了 Fetch 的初步支援功能。Promise 架構的 Fetch 主要是用以替代 XMLHttpRequest (XHR)。我們剛開始可支援大部分的 Fetch 規格,但尚未完整。特別一提,在 Fetch 首次登上 Nightly 時,我們其實尚未建構 FormData 物件的序列化 (Serializing) 與反序列化 (De-serializing)。

GitHub 原本使用了自家實作的 Fetch 補完函式庫 (Polyfill),且包含 FormData 序列化的支援功能,以利將圖像上傳至 GitHub Issues。但因為 GitHub 不知道 Nightly 上的 Fetch 仍屬不完整的初期實作,並會逕自轉用,所以將無法從 Firefox 上傳圖像。

Dan Callahan 將透過下面的 15 分鐘影片,為大家示範實際以 Firefox 開發者工具協助尋找、登載、修正 Bug 1143857:「Fetch 未實作序列化 FormData,而造成 GitHub 出問題。」本影片並非事前設計好的示範,卻是完整的實作範例。影片就是使用 Firefox 開發者工具,實際對壓縮過的 JavaScript 以及出問題的事件處理器進行除錯,並於 Bugzilla 中回報 Gecko 臭蟲,最後測試 Firefox 的修正版本。

你也可透過下列連結觀看影片在 YouTube 上的特定區段:

  • 0:13 – 發現錯誤
  • 0:50 – 使用「網路 (Network)」面板
  • 1:30 – 編輯並重新寄發 HTTP Requests
  • 2:02 – 假設 FormData 轉為字串,而非序列化。
  • 2:40 – 修飾壓縮過的 JavaScript
  • 3:10 – 於事件處理器上設定中斷點
  • 4:57 – 在呼叫堆疊中,上下切換瀏覽
  • 7:54 – 於程式中設定中斷點
  • 8:56 – GitHub 的 FormData 建構子 (Constructor)
  • 10:48 – 呼叫 fetch()
  • 11:53 – 於另一個網域上測試 fetch(),以找出錯誤
  • 12:52 – 檢查 fetch() 的文件
  • 13:42 – 在 Bugzilla 上提報 Gecko 錯誤
  • 14:42 – Bug 1143857 的一生:New、Duplicate、Reopened、Resolved
  • 15:41 – 檢測 Firefox 的修正版本

 

我們期待稍晚釋出的 Firefox 開發者版本 (Developer) 39,就能完整支援 Fetch API。

 

 

原文連結:Using the Firefox DevTools to Debug fetch() on GitHub

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *