Explore a real-world debugging scenario using Firefox DevTools to identify and resolve a fetch() issue on GitHub in this 17-minute video tutorial. Follow along as Dan Callahan demonstrates how to use the Network Panel, edit and resend HTTP requests, prettify minified JavaScript, set breakpoints on event handlers and lines, navigate the call stack, and analyze GitHub's FormData constructor. Learn to verify bugs by testing fetch() on different domains, consult API documentation, and file bugs in Bugzilla. Gain insights into the lifecycle of Bug 1143857, from its discovery to resolution, and understand how to verify fixes in a new Firefox build. Enhance your web development skills with practical debugging techniques and tools provided by Firefox Developer Edition.
Overview
Syllabus
- The error
- Using the Network Panel
- Editing and Resending HTTP Requests
- Hypothesis: FormData was getting coerced to a String rather than being serialized
- Prettifying minified JavaScript
- Setting breakpoints on event handlers
- Navigating the call stack
- Setting breakpoints on lines
- GitHub's FormData constructor
- Invoking fetch
- Verifying the bug by testing fetch on another domain
- Checking the docs for fetch
- Filing a Gecko bug in Bugzilla
- The lifecycle of Bug 1143857: New to Duplicate to Reopened to Resolved
- Verifying a fixed build of Firefox
Taught by
Mozilla Hacks
