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
Introduction to Agile Software Development: Tools & TechniquesUniversity of California, Berkeley via edX Advanced Topics and Techniques in Agile Software Development
University of California, Berkeley via edX The Data Scientist’s Toolbox
Johns Hopkins University via Coursera How to Use Git and GitHub
Udacity Desarrollo de Videojuegos 3D en Unity: Una Introducción
Universidad de los Andes via Coursera