Using the Firefox DevTools to Debug fetch() on GitHub
Offered By: Mozilla Hacks via YouTube
Course Description
Overview
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.
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
Related Courses
Programming LanguagesUniversity of Virginia via Udacity Building a Basic Website
University of Massachusetts Amherst via Independent iDESWEB, Introducción al desarrollo web
MirÃadax Web Engineering II: Developing Mobile HTML5 Apps
Technische Hochschule Mittelhessen via iversity Web Application Architectures
University of New Mexico via Coursera