In this tutorial, we'll take a look at how to debug JavaScript in Chrome.

Originally published here on YouTube.

Please give me a thumbs up on the YouTube video and subscribe to the channel if you found this useful 🙏

00:00 Introduction

00:38 Project overview

01:27 Finding errors in the console

03:40 Setting breakpoints

07:09 Using the Scope tools

09:08 Watched expressions

09:51 Accessing Variables in the console

10:32 DOM Breakpoints

11:51 Conclusion

— Follow Me —

Twitter: twitter.com/codebubb

Facebook: facebook.com/juniordevelopercentral

Blog: juniordevelopercentral.com

— Thanks! —

So in this JavaScript debugging tutorial, we'll be taking a look at how you can use the Chrome Dev tools to find errors in the code running in your web pages or apps.

We'll first take a look at how you can diagnose errors in the console and jump directly to the part of your code that is causing that particular error.

We'll then look at how you can use the developer tools to set breakpoints in the JavaScript code running on a page and step through the code that is running to identify problems with variables and other aspects of the app that's running.

We'll also look at some of the other tools that are available in Chrome such as the scope tool and watched expressions.

Finally, we'll take a look at how you can access variables in the console whilst debugging JavaScript and also how you can setup DOM breakpoints to investigate problems with your code.