Debugging JavaScript - Chrome DevTools 101

[Chnster]

I didn't know Star Lord was a developer

[shymultimedia]

AWESOME video. A coworker and I wanted a deeper understanding of how to use Chrome DevTools, and you've delivered it! Thanks!

[briannistor]

Just started learning javascript and someone sent me a link to this vid to improve my workflow, very helpful!

[geekyprogrammer]

Chris Patt is an amazing developer as well!

[amithbhagat]

Good video. Covered enough basics of debugging in just 7 mins and Demo offers a nice example to try it out quickly.

[pendlesoftware]

If only I'd known about this months ago when i started learning Javascript, it would have saved me so much time debugging, cheers mate. (like the radio cassette by the way, I had one just like that 40 years ago!!)

[janborup]

Thanks - Could very much have used this video many years ago, so very great for newbie debuggers.

[billwindsor]

@Kayce - Excellent job on this. Your content, pacing, and your positive “you can solve this with more powerful tools!” approach all make for informative and encouraging teaching - *thanks*.

[echiang]

Awesome tutorial, very helpful in learning to use the DevTools. Technically for best coding practice, the solution of the problem is to insert parseInt() in lines 35 and 38 when executing the function for getNumber1() and getNumber2(), since that's the methods that we expect to return numbers instead of strings. That way, if you do choose to perform other calculations within the app, you don't need to parseInt() other subsequent mathematical functions.

function getNumber1() {
return parseInt(inputs[0].value);
}
function getNumber2() {
return parseInt(inputs[1].value);
}

[Alquerian]

Less than 2 minutes in and I have already learned something new. Thanks!

[idhamhafidz]

This is so powerful. I never knew this to be so cool and awesome. I want more...

[keith]

I can't thank you enough for the simple step by step instructions with examples. You made it easy enough for a 'noob' to get through it and you gave me what I needed/wanted. Thanks

[ronaldcabrera]

I'm using an incognito window and following the instructions but it is jumping to different lines than on the video. Firstly, it is stopping on line 15, not 14 like in the video. I tried turning off the mouse click even listener and selecting line 14 manually and it won't allow me to, it selects line 15 instead. And this occurred for the other lines selected in the video as well.

[benedictpayot]

Great explanation! All this time I was living under a rock trying to debug manually lol, thank you!

[taylorfullstack]

So what if you land on line 15 instead of line 14, even when in incognito mode, and even when you have disbaled and deleted all of your Chrome extensions? The debugger worked fine except for this first part, and a simple Google search told me I am not the first person to have this issue or to be concerned about this. It persists in both standard Chrome and Chrome Dev browsers. Please respond @ChromeDevs

[himynameiswyatt]

Why does it pause me on line 15 --- if (inputsAreEmpty()) { --- instead of line 14 --- function onClick() { --- every time, REGARDLESS of whether I'm in incognito mode or not? Am I missing something, or is "if you're paused on a different line of code, press Resume Script Execution until you're paused on the correct line" missing a crucial second step?

[arifulhaquebhuiyan]

Hope will start to use DevTools > Sources from today. But need a deep drive to learn more. Thanks for the intro.

[trailblazer_nomad]

Thanks to this video I was able to fix a problem I was trying debug for hours. Thank you so much!

[svenelven]

The example web page now stops on line 15 evaluates at inputsAreEmpty and finishes up at line 20

[petecapecod]

First off, your beard is coming in really nice bro 👍😁 Looking good. Also thanks this was a great video to watch and run through some of the JavaScript debugging tools. It's always nice to have examples to follow along with, and to learn more about Chrome