Using the Firefox DevTools to Debug fetch() on GitHub
In this video, Dan Callahan shows a real-world example of using the Firefox Developer Tools to help find, file, and fix Bug 1143857: "Fetch does not serialize FormData body; breaks GitHub."
0:13 - The error
0:50 - Using the Network Panel
1:30 - Editing and Resending HTTP Requests
2:02 - Hypothesis: FormData was getting coerced to a String rather than being 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 to Duplicate to Reopened to Resolved
15:41 - Verifying a fixed build of Firefox
Links:
- Firefox Developer Edition: https://firefox.com/developer
- Mozilla Hacks Blog: https://hacks.mozilla.org
- Hacks Post on Fetch API: https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/
- Bug 1143857: https://bugzilla.mozilla.org/s....how_bug.cgi?id=11438
- Developer Tools Docs: https://developer.mozilla.org/docs/Tools
- Fetch API Spec: https://fetch.spec.whatwg.org/