How To Debug JavaScript In Chrome

In this tutorial, we'll take a look at how to debug JavaScript in Chrome.
If you want to have a go at debugging the code you can get the project from here: github.com/codebubb/javascrip...
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 -
Twitter: / codebubb
Facebook: / juniordevelopercentral
Blog: 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.
. Channel Handle @codebubb

[@satyasrideviful]

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

[@codewithbubb]

Thanks! Glad you liked it. What other tutorials would you like to see in the future?

[@satyasrideviful]

Welcome keep it up. More exercises and problem challenges

[@pewtang408]

Very clearly explained. Thank you very much!

[@madsakselsen]

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

[@codewithbubb]

Thanks Mads!

[@Tekionemission]

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

[@lsutoob]

Thank you! So clearly presented!

[@danielwinkler1910]

very well explained, thanks a lot!

[@anouarlamghari5417]

thank you for this,great explanation

[@abishekh5129]

Great Explanation!

[@saikiran9003]

Awesome, Thank You!

[@mariyam5062]

Thanks for this.really helpfull.waiting for more videos

[@codewithbubb]

Cheers! Anything in particular you'd like to see covered?

[@dibbyo456]

This is exactly what I needed.

[@codewithbubb]

Cool, glad it helped you out Harry!

[@nilsdannemann]

Very helpful, thanks!

[@codewithbubb]

You're welcome 😀

[@priyanshunishad7402]

Nice explanation

[@codewithbubb]

Thanks very much! Hope you get your debugging done 😀

[@MrAbdullah5010]

Thank you

[@rangabharath4253]

awesome. Please make these kind of videos

[@codewithbubb]

Thanks Ranga - do you mean, more debugging videos?

[@rangabharath4253]

@@codewithbubb yes

[@antonyadshead965]

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

[@codewithbubb]

Whoops! Sorry about that Antony, I must have committed the fixed code rather than the 'buggy' version. You're the first person to spot that so well done! I've pushed the code with the bugs into the repository, if you pull in those changes you should see them like in the tutorial now.

[@delroylake3262]

Looking forward someone to debug my website

[@codewithbubb]

What's the problem you're having?

[@delroylake3262]

@@codewithbubb thanxs for replying well I’ve installed PayPal to my site but it doesn’t do exactly what Needs to on the site can you email me ? [e-mail]

[@uaplatformacomua]

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

[@codewithbubb]

Ah sorry about that. I do try and be as clear and concise as possible. You could always slow the speed down or pause and take notes if that helps?

[@uaplatformacomua]

@@codewithbubb I am not English-language speaking, so I didn't get all the stuff. I watched on mobile, there is a problem to stop and rerun small pieces of video. In any case it was useful. Thank you!

[@suda3119]

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 '../node_modules/bootstrap/scss/bootstrap.scss'; can I get the complete css file contents

[@kenkillian9221]

That is the same problem that I am having, it is not matching the video. Whether successful or not both messages remain at the bottom of the HTML.