Debugging and Fixing Common JavaScript Errors
Learning Paths:
Topics:
Table of Contents
Debugging JavaScript
Introduction
Todd H. Gardner introduces his Debugging JavaScript course and agenda, which covers the process of finding bugs and the concepts to consider when working through the course of removing a bug.
Common JavaScript Quirks
After pulling a volunteer from the audience, Todd tests a student's knowledge to highlight the bizarre quirks in the JavaScript language.
Debugging Cycle
Todd reviews a four stage of a debugging cycle to fix bugs: Identify, Isolate, Resolve, and Prevent.
Fixing Bugs
The getRANTr Application
Todd 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 Review
After 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.
First Bug
Not Preventing the Default Behaviour
Using 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 Property
In this challenge, students need to identify and fix a "Cannot Read Property" bug.
Challenge 1: Solution
Todd walks through the solution to Challenge 1 of function context by enabling async call stacks and blackboxing scripts in Chrome DevTools.
Second Bug
Challenge 2: Persisting Text
In this challenge, students identify and resolve a bug of persisting text.
Challenge 2: Solution
Todd walks through the solution to Challenge 2 covering empty strings and falsy values.
Third Bug
Challenge 3: Server Reporting 400 Bad Request Errors
In this challenge, students identify and resolve a user-form validation bug.
Questions 1
Todd answers questions from students about the first Challenge and how to remove extra event listeners added by frameworks.
Challenge 3: Solution
Todd walks through the solution to Challenge 3 by using the Network Inspector, response previews, and JavaScript debugger and then Todd takes questions from students.
Fourth Bug
Challenge 4: One User, Many Errors
In this challenge, students attempt to determine why a user's data is not showing up.
Challenge 4: Solution
Todd walks through the solution to Challenge 4 by using the Network Inspector, response previews, and JavaScript debugger.
JavaScript Quirks
Fifth Bug
Unexpected High Memory Usage
Demonstrating how to use Profiler and Timeline recordings in Chrome DevTools, Todd shows how to spot memory bugs in an application.
Challenge 5: Memory Usage
In 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: Solution
Todd walks through the solution to Challenge 5.
Sixth Bug
Slow Page Loads
Using screenshots capability in Chrome DevTools, Todd shows how to illustrate a page rendering over time along with network activity.
Challenge 6: Impacts of Load Performance
In this challenge, students identify the biggest impact in load performance of the application using DevTools throttling and screenshots
Challenge 6: Solution
Todd walks through the solution to Challenge 6 by looking for potential impacts in load performance of the application.
Seventh Bug
Third Party Error
Inspecting a code error, Todd determines a bug is occurring due to a third party vendor's code.
Challenge 7: Uncontrolled Changes
In this challenge, students attempt to find out how to resolve a bug resulting from a third party vendor's code.
Challenge 7: Solution
Todd walks through the solution to Challenge 7 by finding DOM inconsistency.
Eighth Bug
Network/Proxy Bug
When 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 Load
In this challenge, students record an error has occurred and attempt to improve the user experience.
Challenge 8: Solution
Todd 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 2
Todd answers questions from students about calling global objects, debugging bundled scripts, and setting cache timeouts.
Developing for a Hostile Environment
Talking about monitoring for bugs within a web application, Todd reviews how to find bugs sooner and therefore cheaper.
Isolating Errors
Todd discusses when to refactor code and introduces the concept building a debug mode in an application.
Resolving Bugs
Todd extolls the virtue of setting up an update testing cycle when releasing code updates to lower the risk of change.
Preventing Bugs
Thinking 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.
