Table of Contents
Debugging CycleTodd reviews a four stage of a debugging cycle to fix bugs: Identify, Isolate, Resolve, and Prevent.
The getRANTr ApplicationTodd introduces the demo application, getRANTr, that is used throughout the course. NOTE: We recommend using Node version 8.17.0 for this course.
Demo Application ReviewAfter the students have installed the application as the learning tool, Todd shows how the application is built and which code sections students should focus their attention.
Not Preventing the Default BehaviourUsing Chrome DevTools, Todd demonstrates how to identify a bug by setting up persistent authoring to see changes immediately and save those changes to disk.
Challenge 1: Cannot Read PropertyIn this challenge, students need to identify and fix a "Cannot Read Property" bug.
Challenge 1: SolutionTodd walks through the solution to Challenge 1 of function context by enabling async call stacks and blackboxing scripts in Chrome DevTools.
Challenge 2: Persisting TextIn this challenge, students identify and resolve a bug of persisting text.
Challenge 2: SolutionTodd walks through the solution to Challenge 2 covering empty strings and falsy values.
Challenge 3: Server Reporting 400 Bad Request ErrorsIn this challenge, students identify and resolve a user-form validation bug.
Questions 1Todd answers questions from students about the first Challenge and how to remove extra event listeners added by frameworks.
Challenge 4: One User, Many ErrorsIn this challenge, students attempt to determine why a user's data is not showing up.
Unexpected High Memory UsageDemonstrating how to use Profiler and Timeline recordings in Chrome DevTools, Todd shows how to spot memory bugs in an application.
Challenge 5: Memory UsageIn this challenge, students attempt to verify the memory leak is occurring with Chrome DevTools and pinpoint in the code where the leak is happening.
Challenge 5: SolutionTodd walks through the solution to Challenge 5.
Slow Page LoadsUsing screenshots capability in Chrome DevTools, Todd shows how to illustrate a page rendering over time along with network activity.
Challenge 6: Impacts of Load PerformanceIn this challenge, students identify the biggest impact in load performance of the application using DevTools throttling and screenshots
Challenge 6: SolutionTodd walks through the solution to Challenge 6 by looking for potential impacts in load performance of the application.
Third Party ErrorInspecting a code error, Todd determines a bug is occurring due to a third party vendor's code.
Challenge 7: Uncontrolled ChangesIn this challenge, students attempt to find out how to resolve a bug resulting from a third party vendor's code.
Challenge 7: SolutionTodd walks through the solution to Challenge 7 by finding DOM inconsistency.
Network/Proxy BugWhen a user has a bad experience with an application due to a third party script, Todd shows how to locate the error through load checking, simulating network speeds, and blocking scripts through a proxy.
Challenge 8: jQuery Fails to LoadIn this challenge, students record an error has occurred and attempt to improve the user experience.
Challenge 8: SolutionTodd walks through the solution to Challenge 8 by incorporating a failback when a third party code on a CDN fails to load.
Design for Debuggability
Questions 2Todd answers questions from students about calling global objects, debugging bundled scripts, and setting cache timeouts.
Developing for a Hostile EnvironmentTalking about monitoring for bugs within a web application, Todd reviews how to find bugs sooner and therefore cheaper.
Isolating ErrorsTodd discusses when to refactor code and introduces the concept building a debug mode in an application.
Resolving BugsTodd extolls the virtue of setting up an update testing cycle when releasing code updates to lower the risk of change.
Preventing BugsThinking about how to prevent bugs from entering the code, Todd talks about introducing regression tests and updating processes as possible solutions realizing there is a cost associated with each.