Mozilla Hacks

Using the Firefox DevTools to Debug fetch() on GitHub

Avatar photo By Dan Callahan

Posted on March 19, 2015 in Developer Tools and Featured Article

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.

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…

3 comments

  1. Šime Vidas

    This gives me confidence that debugging uglified code is possible :)

    March 19th, 2015 at 20:39

    1. Dan Callahan

      Yeah! Source maps would have made my life way easier, but I got there in the end. :-)

      Thanks to this experience we’re also now working on better previews for FormData objects, so I wouldn’t have to keep checking with .get(). That’s Bug 1145460.

      March 20th, 2015 at 05:17

  2. fvsch

    Thanks for the demo! I’ve tried using breakpoints etc. before, and reading the Firebug, Chrome DevTools and firefox DevTools docs for that, but I never quite understood how it works or, more importantly, what I could do with it. This example makes it clear.

    Demos that say “Look, you can do *this* and it solves a problem!” are more efficient than demos that say “Here’s how you can do *this*”, imo. I’ll be looking in the Firefox/Chrome dev docs for more screencasts like this. :)

    March 22nd, 2015 at 07:02

Comments are closed for this article.