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); }
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!!)
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
A great example of both the advantage and disadvantage of using a debugger... Advantage: - it helps one locate *where* something breaks quite fast... Disadvantage: - it is so fast that it's very easy to skip over the root of *why* something broke... In the video, the surface error is the concatenation of two strings where the addition of two numbers is expected... but the actual problem is not addition vs. concatenation but rather a bit deeper, in the way the values are accessed, you call getNumberX(..) and get a string rather than a number, and in this particular case fixing the root problem will eliminate a whole class of potential errors while the solution given in the vid will "mask" the error and lead to code bloat. To reiterate, the debugger helps one locate the breakage, and maybe patch a particular case (wrong operation type in the vid) but it does not replace the skill to find/see the actual root of the breakage, the actual bug (here "getNumber*(..) -> String" name/return mismatch) and fix it.
Alex Naanou I disagree with you, at least when speaking about this specific example here, using a slower debug procedure like console.log wouldn't have made his solution any different, he would have still come to the same conclusion and still change the same line of code, the cause of the problem is that the value he's getting is a string, he understand that and eventually he would have understand that in both debug procedures, he also knows in both procedures that he gets the value from the functions of getNumber(x), what's different? he chose to ignore this knowledge in this video(probably just to simplify things) and I don't see a reason why he wouldn't have chose to ignore it if he would have used console.log.
@Christopher Huber I agree with the setup part, but would argue against the rest -- when in a public context you have to consider both the educational and informational aspects of a video, if we ignore the first you are 100% correct, if we don't, then this video is also a figure of authority (Google) showing a correct way to use "the new feature in a tool" or is it "the tool and its new feature"? ...the two are quite different and I hope you can guess how a person who has little or no experience with the tool would read this =)
@ReillyArr-vc1rmI like how you put it, the expression can be understood it at least three quite distinct and almost opposed ways! =) Which developer do you mean? ...the one using the debugger in the vid and missing the source of the error, the one to whom the debugger is a "disadvantage" (excuse the pun), or the one learning from this video? =)
@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*.
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
Right or wrong, but it just proves everything is considered as a string, makes it easier to understand. Same development or debugging approach is used for hardware - which is a general rule where to begin, but it's little too hard to get familiar with it is an Arduino.
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.
I have the same problem as the others below, click listener points me to line 14 instead of 15, I tried to do it but nothing helps (incognito mode, different browser, etc.). Anyway, it doesn't bother you because later instructions are key. A useful guide for me as a beginner, thank you
It's a great idea for a video since you're very right there is a lot in DevTools I (and likely others) have no idea exist, and the same goes for other debugging tools like that found in VSCode. Cheers!
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?
Your videos are great, but I have a request, please increase the video quality a bit or zoom in a little, most times the text is blurry. Also the video doesn't have an option to increase the quality from my end.
It's difficult to follow the script when what I see on my browser doesn't match what's in the video. I do wish that the debugging tools team would sort out whats going on as the platform changes or how to make things match the video, E.g. the [Sources ] link isn't visible until the [debugging] link is opened. It's the little things that throw off people and create confusion in your audience.
Learnt some pretty good debugging lessons, specially the breakpoints and watch tool are something which will come pretty handy. thanks for the Knowledge Transfer. :)
Am I the only one here who didn't understand anything? I mean, I understood, but my click - event listener stops at if(inputsAreEmpty()) function and never in any other line,
Zooming in and describing which buttons are being push where and when would have been very helpful, especially since google frequently changes the layout in subtle ways.
Important to note that Chrome DevTools can also debug code written in a different programming language (eg Kotlin - kotlinlang.org/docs/tutorials/javascript/debugging-javascript/debugging-javascript.html ), provided source maps are supplied ( kotlinlang.org/assets/images/tutorials/javascript/debugging-javascript/chrome-devtools.png ).
The example doesn't include the get-started.js in the Sources file options. Only the html page with the script reference comes up. Applying to another file. Traversy likely delves into some of the features across the board too.
2:56 I tried this in incognito and still paused at 'if (inputsAreEmpty()) {' Then i tried this on firefox (on which i have no extensions) and i get the same result??
The event listener breakpoint was probably the worst one to show off since most of us use some type of framework which wraps event listeners and until you get to your code you would've console.logged the whole app 😁
That's gonna be a tough one, you'll have to handle frameworks when added from CDNs, when being bundled, AMD, CommonJS... That starts to sound like a dream to have that feature. I advise everyone to start adding debugger statements instead of console.logs everywhere they would've added them, and they would most probably don't feel the need for event listener breakpoints. Also that way when doing cross browser testing of a certain feature you'll always break on the debugger and not whatever the DevTools of browser X gets you to (not to mention just finding their placement in the UI). People still use IE after all 😥
@Kayce - Great. I tested with jQuery and it is working. For AngularJS ng-click directive, it stops one level above in a script with yellow background. From there we can step into the correct function.
Question: Does console.log usage affect the performance of a production web app if the app is logging several variables and events constantly at runtime? Thanks and Great channel!
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
On the first screen you forgot one needs to click on "Network" tab, my Chrome started on Filesystem tab, so didn't look the same, small detail, but important;)
Kinda misleading for the beginner to understand, considering the example you took! Played it smart by allowing the user to give inputs making the debugger stop for click event listener which inturn allowed me to enter input. I was trying to give the inputs by inserting breakpoint before the readInputs function and the dev tool doesn't allow me to, says: "paused in the debugger". If this is how it should work then it's fine. Since the usage is sometimes not obvious and as all of us are impatient 😂 I think that's the reason why beginners go for console.log instead of debugging.
after check the "click" box and click again in the "Add Number 1..." button, the Dev Tools open another page like "main.js......" not scope in "function onClick()" like min 2:34
The video is awesome but I just wish my real life projects were this simple. Moreover, the real challenge arises when we have to deal with a web of callbacks and promises. Despite all the features, it seems I almost always have to fallback to console.log ☹️
Exactly this, alot of bugs come from timing issues or wrong handeling of promises, when break pointing you may create bugs that only appear in the debugger, or the bugs doesnt occur in the debugger. So for me console.log is also still the best option
He put a breakpoint on click. The onClick method only called updateLabel() and that was the end of it.. sure the bug could be in the getNumber1 and 2 since it's supposed to be a number and not "getInput1" but within that call-scope. Hope it helps someone :)
so im trying to follow along and im at 3:05 in the video and im practicing this in a regular window and in an incognito window but both are going to the "if" statment after the onClick variable is there any thing that im doing wrong or need to different on my MAC
When I first click on the Add Number button, the blue line takes me to line 25: if(event.button ==2) of the subscriptionLink.postload.js and not the get-started.js. Can you please explain this?? This makes this video useless for me.
Thank you very much Kayce. I have a question. How can we trace a mouse click if the JS file is minified, is there a Chrome extension/ tool through which we can see expanded code while debugging? Please let me know. Thanks again!
4 года назад+1
I'm afraid is not possible, but I'll be waiting for another answer here :)
Quite confusing. Apparently you're working on javascript code but nowhere is it mentioned which piece of code do you load. Until that happens the Event Listener option and many others are not displayed. As of 5/2019, opening the counsole at the page you referenced shows none of the files you're working with. Actually I was able to find it eventually, a little difficult tho.
if you write the code in the manner if (cond) { return true; } else ( return false; } instead of simple return cond; why do you think that you may teach someone to something ... ?
I failed to get a pause on the line for the update label even though I placed a break there :-( Even stepping through just seemed to skip that section!)
I didn't know Star Lord was a developer
It's not Star Lord it's Antman
It's Blake Shelton!
A more handsome Star Lord.
ayyyyyy!
dont know who that is but this guy is hot LOL
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);
}
See XD q
AWESOME video. A coworker and I wanted a deeper understanding of how to use Chrome DevTools, and you've delivered it! Thanks!
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!!)
Chris Patt is an amazing developer as well!
what is he doing here? does he code?
Half Chris Pratt, half Paul Rudd.
@@solushex seriously!!! I see it!
He's really cute
@@solushex holy Sh*t I was literally thinking the same thing. Those two specific actors haha
Just started learning javascript and someone sent me a link to this vid to improve my workflow, very helpful!
Good video. Covered enough basics of debugging in just 7 mins and Demo offers a nice example to try it out quickly.
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
A great example of both the advantage and disadvantage of using a debugger...
Advantage:
- it helps one locate *where* something breaks quite fast...
Disadvantage:
- it is so fast that it's very easy to skip over the root of *why* something broke...
In the video, the surface error is the concatenation of two strings where the addition of two numbers is expected... but the actual problem is not addition vs. concatenation but rather a bit deeper, in the way the values are accessed, you call getNumberX(..) and get a string rather than a number, and in this particular case fixing the root problem will eliminate a whole class of potential errors while the solution given in the vid will "mask" the error and lead to code bloat.
To reiterate, the debugger helps one locate the breakage, and maybe patch a particular case (wrong operation type in the vid) but it does not replace the skill to find/see the actual root of the breakage, the actual bug (here "getNumber*(..) -> String" name/return mismatch) and fix it.
well said. i have nodded in agreement :-)
Alex Naanou I disagree with you, at least when speaking about this specific example here, using a slower debug procedure like console.log wouldn't have made his solution any different, he would have still come to the same conclusion and still change the same line of code, the cause of the problem is that the value he's getting is a string, he understand that and eventually he would have understand that in both debug procedures, he also knows in both procedures that he gets the value from the functions of getNumber(x), what's different? he chose to ignore this knowledge in this video(probably just to simplify things) and I don't see a reason why he wouldn't have chose to ignore it if he would have used console.log.
@Christopher Huber I agree with the setup part, but would argue against the rest -- when in a public context you have to consider both the educational and informational aspects of a video, if we ignore the first you are 100% correct, if we don't, then this video is also a figure of authority (Google) showing a correct way to use "the new feature in a tool" or is it "the tool and its new feature"?
...the two are quite different and I hope you can guess how a person who has little or no experience with the tool would read this =)
@ReillyArr-vc1rmI like how you put it, the expression can be understood it at least three quite distinct and almost opposed ways! =)
Which developer do you mean? ...the one using the debugger in the vid and missing the source of the error, the one to whom the debugger is a "disadvantage" (excuse the pun), or the one learning from this video? =)
Brilliant! I should have viewed this YEARS AGO! THANK YOU!
This is so powerful. I never knew this to be so cool and awesome. I want more...
@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*.
Thank you for this! I've just started learning JS and this was immensely helpful.
Hey
Great explanation! All this time I was living under a rock trying to debug manually lol, thank you!
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
Thanks - Could very much have used this video many years ago, so very great for newbie debuggers.
Less than 2 minutes in and I have already learned something new. Thanks!
Right or wrong, but it just proves everything is considered as a string, makes it easier to understand. Same development or debugging approach is used for hardware - which is a general rule where to begin, but it's little too hard to get familiar with it is an Arduino.
Thanks to this video I was able to fix a problem I was trying debug for hours. Thank you so much!
This 7:27 video just saved me 5,000 + hours of hair pulling, primal scream therapy, and general rage and frustration. Thank you GCD!!!!!!
Hope will start to use DevTools > Sources from today. But need a deep drive to learn more. Thanks for the intro.
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.
because of how JS works, the function identifiers are skipped, the actual expression matters
I have the same problem as the others below, click listener points me to line 14 instead of 15, I tried to do it but nothing helps (incognito mode, different browser, etc.). Anyway, it doesn't bother you because later instructions are key. A useful guide for me as a beginner, thank you
Awesome! Debugging tips always welcome. I'm trying to break out of my console.log habit to solve issues
It's a great idea for a video since you're very right there is a lot in DevTools I (and likely others) have no idea exist, and the same goes for other debugging tools like that found in VSCode. Cheers!
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?
Same here.
The example web page now stops on line 15 evaluates at inputsAreEmpty and finishes up at line 20
This helped me get rid of an annoying breakpoint that somehow made it's way into all my Vue projects.
This dude knows it all. You will be my teacher
Shirt's on point. Glad to finally see a little bit of fashion coming into the development world. Seriously.
It was an absolute joy to watch this! Thank you
Your videos are great, but I have a request, please increase the video quality a bit or zoom in a little, most times the text is blurry. Also the video doesn't have an option to increase the quality from my end.
Liked your video. Good Resolution. Great Clothes.
It's difficult to follow the script when what I see on my browser doesn't match what's in the video. I do wish that the debugging tools team would sort out whats going on as the platform changes or how to make things match the video, E.g. the [Sources ] link isn't visible until the [debugging] link is opened. It's the little things that throw off people and create confusion in your audience.
Love getting debugging advice from Chris Pratt :)
Learnt some pretty good debugging lessons, specially the breakpoints and watch tool are something which will come pretty handy. thanks for the Knowledge Transfer. :)
Here from The Odin Project. Good luck everyone! :)
Am I the only one here who didn't understand anything? I mean, I understood, but my click - event listener stops at if(inputsAreEmpty()) function and never in any other line,
me!
same, terrible video
This is enough for development I think
Remaining things you can learn by your own and that's best practice
Though manually parsing the strings is effective, a better way is to use the .valueAsNumber property instead of .value.
Zooming in and describing which buttons are being push where and when would have been very helpful, especially since google frequently changes the layout in subtle ways.
Nice tools, I will use them. These are tools that have been available in visual studio for a long time. They replaced printf() debugging
Awesome series, keep it up!
Great. But it's pretty annoying to debug when using library, especially with frameworks. It would jump to a lot of library code
any tip on how to deal with situations like that?
@@khatmanworld
2:40
Important to note that Chrome DevTools can also debug code written in a different programming language (eg Kotlin - kotlinlang.org/docs/tutorials/javascript/debugging-javascript/debugging-javascript.html ), provided source maps are supplied ( kotlinlang.org/assets/images/tutorials/javascript/debugging-javascript/chrome-devtools.png ).
Eh, thanks alot man. You've exposed things I've never even heard of or thought possible
The example doesn't include the get-started.js in the Sources file options. Only the html page with the script reference comes up. Applying to another file. Traversy likely delves into some of the features across the board too.
@5:20 scope > local/global values currently defined
This dude is mad steezy. Dank vid.
I love this tutorial! Thank you
I was just happy that I knew the problem before going through the debugger...Whoop Whoop im learning
2:56 I tried this in incognito and still paused at 'if (inputsAreEmpty()) {'
Then i tried this on firefox (on which i have no extensions) and i get the same result??
Having the same issue, I tried multiple browsers. It's literally driving me crazy.
Same. I feel like I'm taking crazy pills.
even in incognito mode i cant get the breakpoint to pause on the correct line. I followed the directions exactly
Thanks so much, you are the best. Finally i learnt something new today.
Thank you for step by step explanation!
EXCEPTIONAL! Just what I needed to get me going on debugging! :o) Thanks a bunch!!
The event listener breakpoint was probably the worst one to show off since most of us use some type of framework which wraps event listeners and until you get to your code you would've console.logged the whole app 😁
That's gonna be a tough one, you'll have to handle frameworks when added from CDNs, when being bundled, AMD, CommonJS... That starts to sound like a dream to have that feature. I advise everyone to start adding debugger statements instead of console.logs everywhere they would've added them, and they would most probably don't feel the need for event listener breakpoints. Also that way when doing cross browser testing of a certain feature you'll always break on the debugger and not whatever the DevTools of browser X gets you to (not to mention just finding their placement in the UI). People still use IE after all 😥
This looks awesome, I will be trying it out. You might as well do a short video bringing some awareness to other web devs about this feature.
@Kayce - Great. I tested with jQuery and it is working. For AngularJS ng-click directive, it stops one level above in a script with yellow background. From there we can step into the correct function.
They fixed it with Chrome 66. developers.google.com/web/updates/2018/02/devtools#tip
Question: Does console.log usage affect the performance of a production web app if the app is logging several variables and events constantly at runtime? Thanks and Great channel!
Good one, I like the background 👨💻
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
It doesn't work with minified code with source maps. All the variables in the list of Local are minified.
Anyone know why it pauses on line 15 for me but line 14 for him? at 2:42
On the first screen you forgot one needs to click on "Network" tab, my Chrome started on Filesystem tab, so didn't look the same, small detail, but important;)
thanks for teaching me a better way, funky shirt man.
Probably I should watch this video before 20h of debugging :D
Wow. I never knew. Very useful ! Thank you.
His jacket is so lit, I want it!
Kinda misleading for the beginner to understand, considering the example you took! Played it smart by allowing the user to give inputs making the debugger stop for click event listener which inturn allowed me to enter input. I was trying to give the inputs by inserting breakpoint before the readInputs function and the dev tool doesn't allow me to, says: "paused in the debugger". If this is how it should work then it's fine. Since the usage is sometimes not obvious and as all of us are impatient 😂 I think that's the reason why beginners go for console.log instead of debugging.
after check the "click" box and click again in the "Add Number 1..." button, the Dev Tools open another page like "main.js......" not scope in "function onClick()" like min 2:34
I'm a new web-developer, I was given a task to check errors and bugs in a website page
It really helped me @ the right time. Thank U so much.
I feel like I am 10 levels up in web developing in 10 mins :D thanks
thank you for the wonderful tips and tricks
Great host, keep up the good work!
Very useful tutorial!
You save my life starLord
The video is awesome but I just wish my real life projects were this simple. Moreover, the real challenge arises when we have to deal with a web of callbacks and promises. Despite all the features, it seems I almost always have to fallback to console.log ☹️
Exactly this, alot of bugs come from timing issues or wrong handeling of promises, when break pointing you may create bugs that only appear in the debugger, or the bugs doesnt occur in the debugger. So for me console.log is also still the best option
A much faster shortcut is just F12, not control shift J.
Around 4:40 he says "I can tell the bug is probably in the updateLabel function"; how did he know that?
He put a breakpoint on click. The onClick method only called updateLabel() and that was the end of it.. sure the bug could be in the getNumber1 and 2 since it's supposed to be a number and not "getInput1" but within that call-scope.
Hope it helps someone :)
I never knew that Chris Pratt could code. Cool!
so im trying to follow along and im at 3:05 in the video and im practicing this in a regular window and in an incognito window but both are going to the "if" statment after the onClick variable is there any thing that im doing wrong or need to different on my MAC
having the same issue, tested on two different computers, windows and mac both in incognito mode and regular browsing mode, any tips on fixing this?
What if I want to debug onLoad. If I make changes to the js file in chrome and reload the page I will loose my changes
When I first click on the Add Number button, the blue line takes me to line 25: if(event.button ==2) of the subscriptionLink.postload.js and not the get-started.js. Can you please explain this?? This makes this video useless for me.
In Firefox you can add certain js files and folders in ignore list while debugging. This feature doesn't work properly in Chrome :(
Awesome, thanks! That's pretty helpful
typical editor hotkeys should work in editor pane and not be bubbled up to chrome window. I keep closing my tabs by exiting files with cmd+W.
how to inspect dropdown element in chrome ??. You really test yours apps ?
Thank you very much Kayce. I have a question. How can we trace a mouse click if the JS file is minified, is there a Chrome extension/ tool through which we can see expanded code while debugging? Please let me know. Thanks again!
I'm afraid is not possible, but I'll be waiting for another answer here :)
F10 for step over, F11 for step into. You should have said that
Thanks Chris Pratt!!!
how to open console when source window with debugger is open ?
Quite confusing. Apparently you're working on javascript code but nowhere is it mentioned which piece of code do you load. Until that happens the Event Listener option and many others are not displayed. As of 5/2019, opening the counsole at the page you referenced shows none of the files you're working with. Actually I was able to find it eventually, a little difficult tho.
This is so dope! Ty!
Awesome video, thanks!
if you write the code in the manner
if (cond) {
return true;
} else (
return false;
}
instead of simple
return cond;
why do you think that you may teach someone to something ... ?
Thanks, I wonder how to do so when working with a library like react, vue.. is it possible to only go through the code you write?
You're awesome, things for the tut :).
I failed to get a pause on the line for the update label even though I placed a break there :-( Even stepping through just seemed to skip that section!)
would "addend1" var be available in console if you hadn't opened source panel?
You tought me continue-startover-stepinto-stepout,event listener breakpoint, watches, modifying the js code in place and save to see in work.
Kayce Basques - author. I was wondering and found it on the article