Learning JavaScript Debugging

Discover how to work with a debugger to efficiently locate and resolve issues in your JavaScript projects.

Introduction

• Welcome
• What you should know
• Exercise files
• What's new in this update
• Using challenges

1. Understanding the Need for a Debugger

• Introducing our friend, the debugger
• Important jargon and concepts
• Debuggers in web browsers
• The importance of a good editor and IDE
• Why debugging AJAX can be tricky

2. Debugger Basics

• Debugging without a debugger
• Leverage more of the Console API
• Stop and look around: Simple breakpoints
• Explore other breakpoint options
• Challenge: Knowing when to stop
• Solution: Knowing when to stop
• Step into, over, and out of functions
• Find out where you are using the call stack
• Monitor variables with watches
• Source maps to debug minified files
• Challenge: Putting it all together
• Solution: Putting it all together

3. Debugging in Practice

• Debugging the use of a jQuery plugin
• Debugging a React application in Chrome
• Debugging on iOS using Simulator
• Remote debugging on an Android device
• Challenge: Other people's code
• Solution: Other people's code
• Debugging a Node.js application in WebStorm
• Setting up the WordPress example
• Challenge: Debugging with an IDE
• Solution: Debugging with an IDE
• Debug a WordPress theme in Visual Studio Code
• Use a debugger as a learning tool on a live site

Conclusion

• Next steps
• Extra JavaScript resources