DEV Community

0 seconds of 12 minutes, 31 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
12:31
 
James Bubb
James Bubb

Posted on

5 2

How to debug JavaScript code in Chrome

Originally published here on YouTube.

(Please give me a thumbs up and subscribe if you found this useful or follow me on Twitter: @codebubb 🙏).

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: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More