Learning JavaScript Debugging

Course details

Whether you're new to coding or an experienced developer, bugs are an inevitable part of web development. Debuggers can make the task of finding and fixing those bugs much easier. In this course, learn how to work with a debugger to efficiently locate and resolve issues in your JavaScript projects. Instructor Joe Chellman provides a language-centered guide to dealing with the complexities involved in creating for the largest distributed platform out there: the web. He covers why we need debuggers, goes over notable jargon and concepts, and steps through the basics of using a debugger. He then takes a look at debugging in practice, sharing how to debug a React application in Chrome, how to debug on iOS using Simulator, how to debug a WordPress theme in Visual Studio Code, and more.

Learning objectives
Understanding the need for a debugger
Debuggers in web browsers
Basic debugger concepts
Debugging the use of a jQuery plugin
Remote debugging on an Android device
Debugging a node application in WebStorm
Using a debugger as a learning tool on a live site

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Exercise files
04 - What's new in this update
05 - Using challenges

1. Understanding the Need for a Debugger

06 - Introducing our friend, the debugger
07 - Important jargon and concepts
08 - Debuggers in web browsers
09 - The importance of a good editor and IDE
10 - Why debugging AJAX can be tricky

2. Debugger Basics

11 - Debugging without a debugger
12 - Leverage more of the Console API
13 - Stop and look around - Simple breakpoints
14 - Explore other breakpoint options
15 - Challenge - Knowing when to stop
16 - Solution - Knowing when to stop
17 - Step into, over, and out of functions
18 - Find out where you are using the call stack
19 - Monitor variables with watches
20 - Source maps to debug minified files
21 - Challenge - Putting it all together
22 - Solution - Putting it all together

3. Debugging in Practice

23 - Debugging the use of a jQuery plugin
24 - Debugging a React application in Chrome
25 - Debugging on iOS using Simulator
26 - Remote debugging on an Android device
27 - Challenge - Other people's code
28 - Solution - Other people's code
29 - Debugging a node application in WebStorm
30 - Setting up the WordPress example
31 - Debug a WordPress theme in Visual Studio Code
32 - Use a debugger as a learning tool on a live site
33 - Challenge - Debugging with an IDE
34 - Solution - Debugging with an IDE

Conclusion

35 - Next steps
36 - Extra JavaScript resources

Learning JavaScript Debugging

Authors

Joe Chellman