How To Debug JavaScript In Chrome

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

How To Debug JavaScript In Chrome
-----------------------------------------------------------
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 —
— 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.
. Channel Handle @codebubb

[satyasrideviful]

Omg thank you for this. I was searching this kind of wonderful guide and videos. Please don't stop

[Tekionemission]

(11:45) - I didn't know that setting debugs on the source, gets you to the source code. Nice! Thank you.

[pewtang]

Very clearly explained. Thank you very much!

[madsakselsen]

Really, really good video. Very well explained. Thanks!

[mariyam]

Thanks for this.really helpfull.waiting for more videos

[rangabharath]

awesome. Please make these kind of videos

[antonyadshead]

I downloaded it from Github and it runs fine! Or at lesat no errors show in the console. I could put some bugs in but that seems like a bit of an effort

[delroylake]

Looking forward someone to debug my website

[uaplatformacomua]

Thank you. But too fast. I don't understand almost everything.

[suda]

When I run the index.html, the page is loaded with both messages Successfully logged in! and Incorrect login details. Looks like the css file from github has a single line @import can I get the complete css file contents