Discover how to work with a debugger to efficiently locate and resolve issues in your JavaScript projects.
Overview
Syllabus
Introduction
- Welcome
- What you should know
- Exercise files
- What's new in this update
- Using challenges
- 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
- 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
- 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
- Next steps
- Extra JavaScript resources
Taught by
Joe Chellman
