Firefox Nightly recently added preliminary support for Fetch, a modern, Promise-based replacement for XMLHttpRequest (XHR). Our initial work supported most of the Fetch Specification, but not quite all of it. Specifically, when Fetch first appeared in Nightly, we hadn’t yet implemented serializing and de-serializing of FormData objects.

GitHub was already using Fetch in production with a home-grown polyfill, and required support for serializing FormData in order to upload images to GitHub Issues. Thus, when our early, incomplete implementation of Fetch landed in Nightly, the GitHub polyfill stepped out of the way, and image uploads from Firefox broke.

In the 15-minute video below, Dan Callahan shows a real-world instance of using the Firefox Developer Tools to help find, file, and fix Bug 1143857: “Fetch does not serialize FormData body; breaks GitHub.” This isn’t a canned presentation, but rather a comprehensive, practical demonstration of actually debugging minified JavaScript and broken event handlers using the Firefox DevTools, reporting a Gecko bug in Bugzilla, and ultimately testing a patched build of Firefox.

Use the following links to jump to a specific section of the video on YouTube:

• 0:13 – The error
• 0:50 – Using the Network Panel
• 1:30 – Editing and Resending HTTP Requests
• 2:02 – Hypothesis: FormData was coerced to a String, not serialized
• 2:40 – Prettifying minified JavaScript
• 3:10 – Setting breakpoints on event handlers
• 4:57 – Navigating the call stack
• 7:54 – Setting breakpoints on lines
• 8:56 – GitHub’s FormData constructor
• 10:48 – Invoking fetch()
• 11:53 – Verifying the bug by testing fetch() on another domain
• 12:52 – Checking the docs for fetch()
• 13:42 – Filing a Gecko bug in Bugzilla
• 14:42 – The lifecycle of Bug 1143857: New, Duplicate, Reopened, Resolved
• 15:41 – Verifying a fixed build of Firefox

We expect Firefox Developer Edition version 39 to ship later this month with full support for the Fetch API.