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? =)
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
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!!)
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?
@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*.
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.
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,
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.
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
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
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
2:32 I can never seem to pause on the onClick function line, but it will always pause on the "if (inputsAreEmpty) {" line below it... Am I doing something wrong?
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 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!
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.
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??
Learnt some pretty good debugging lessons, specially the breakpoints and watch tool are something which will come pretty handy. thanks for the Knowledge Transfer. :)
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!
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.
when I click on the button, it takes me to a "grammar check" with a file with over 5000 lines of code, how can I take that option off? because that has happened before to me when I was trying to use the debugger but it usually takes me to these long "VM" files.
Do you know a good video resource for debugging Internet Explorer (IE)11? I have clients that use IE which when used causes so erratic behaviors and unfortunately aren't quick to change to Chrome even my software works with not erratic behaviors in Chrome. Any assistance is appreciated thanks
Why do I go into the content.js file when I set my Event Listener Breakpoint as demonstrated on the video? I'm really lost in why my break is not working as in the video... Can someone give me some light?
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
In my event handler there is another function being called, to find the definition of this function I have to scroll up and down, is there a better way ?
I'm studying the JavaScript console today! Just a quick warning, when I'm on web pages (like Google, TH-cam, or Facebook), I don't want to accidentally delete codes on the "Elements" tab. Can you do that, or will the computer not allow you too?
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.
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 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.
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 :)
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.
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;)
If I'm using sourcemap, how do I set devtools to open the right module? is it the same question as @Dimitar Nestorov? I'm using React and bundling it with webpack, so, bringing me into the bundle file isn't very efficient
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 ... ?
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.
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.
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
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
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? =)
AWESOME video. A coworker and I wanted a deeper understanding of how to use Chrome DevTools, and you've delivered it! Thanks!
Good video. Covered enough basics of debugging in just 7 mins and Demo offers a nice example to try it out quickly.
Just started learning javascript and someone sent me a link to this vid to improve my workflow, very helpful!
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
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
Brilliant! I should have viewed this YEARS AGO! THANK YOU!
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!!)
This is so powerful. I never knew this to be so cool and awesome. I want more...
Thank you for this! I've just started learning JS and this was immensely helpful.
Hey
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.
This 7:27 video just saved me 5,000 + hours of hair pulling, primal scream therapy, and general rage and frustration. Thank you GCD!!!!!!
@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*.
Thanks - Could very much have used this video many years ago, so very great for newbie debuggers.
Great explanation! All this time I was living under a rock trying to debug manually lol, thank you!
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
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
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.
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
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
Less than 2 minutes in and I have already learned something new. Thanks!
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
2:32 I can never seem to pause on the onClick function line, but it will always pause on the "if (inputsAreEmpty) {" line below it... Am I doing something wrong?
Liked your video. Good Resolution. Great Clothes.
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.
This helped me get rid of an annoying breakpoint that somehow made it's way into all my Vue projects.
Hope will start to use DevTools > Sources from today. But need a deep drive to learn more. Thanks for the intro.
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!
The example web page now stops on line 15 evaluates at inputsAreEmpty and finishes up at line 20
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.
Love getting debugging advice from Chris Pratt :)
This dude knows it all. You will be my teacher
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.
Shirt's on point. Glad to finally see a little bit of fashion coming into the development world. Seriously.
Thanks to this video I was able to fix a problem I was trying debug for hours. Thank you so much!
how can i disable an spesicif JS file. ( i wanna it work but i dont wanna see warning or debug) ?
It was an absolute joy to watch this! Thank you
Learnt some pretty good debugging lessons, specially the breakpoints and watch tool are something which will come pretty handy. thanks for the Knowledge Transfer. :)
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!
Anyone know why it pauses on line 15 for me but line 14 for him? at 2:42
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.
Eh, thanks alot man. You've exposed things I've never even heard of or thought possible
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
It doesn't work with minified code with source maps. All the variables in the list of Local are minified.
when I click on the button, it takes me to a "grammar check" with a file with over 5000 lines of code, how can I take that option off? because that has happened before to me when I was trying to use the debugger but it usually takes me to these long "VM" files.
I love this tutorial! Thank you
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?
Hello, thanks for the video. Question: Can i debug an error with a payment processor in the site? OR this is cannot be done? Thanks
This is enough for development I think
Remaining things you can learn by your own and that's best practice
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
Do you know a good video resource for debugging Internet Explorer (IE)11? I have clients that use IE which when used causes so erratic behaviors and unfortunately aren't quick to change to Chrome even my software works with not erratic behaviors in Chrome. Any assistance is appreciated thanks
This dude is mad steezy. Dank vid.
Thank you for step by step explanation!
In angular, we have ts files but event listener breakpoints goes to the javascript file. Is there any way to point to ts file?
Why do I go into the content.js file when I set my Event Listener Breakpoint as demonstrated on the video? I'm really lost in why my break is not working as in the video... Can someone give me some light?
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?
Awesome series, keep it up!
Good one, I like the background 👨💻
In my event handler there is another function being called, to find the definition of this function I have to scroll up and down, is there a better way ?
even in incognito mode i cant get the breakpoint to pause on the correct line. I followed the directions exactly
I'm studying the JavaScript console today!
Just a quick warning, when I'm on web pages (like Google, TH-cam, or Facebook), I don't want to accidentally delete codes on the "Elements" tab. Can you do that, or will the computer not allow you too?
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.
Nice tools, I will use them. These are tools that have been available in visual studio for a long time. They replaced printf() debugging
how to inspect dropdown element in chrome ??. You really test yours apps ?
In Firefox you can add certain js files and folders in ignore list while debugging. This feature doesn't work properly in Chrome :(
would "addend1" var be available in console if you hadn't opened source panel?
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 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.
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 :)
Here from The Odin Project. Good luck everyone! :)
A page's video and other moving objects pauses when I open devtools. How do I fix that?
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
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;)
If I'm using sourcemap, how do I set devtools to open the right module?
is it the same question as @Dimitar Nestorov?
I'm using React and bundling it with webpack, so, bringing me into the bundle file isn't very efficient
2018
Thanks so much, you are the best. Finally i learnt something new today.
When can devtools dynamicly change non .js files, ie inline javascript in the html file
His jacket is so lit, I want it!
EXCEPTIONAL! Just what I needed to get me going on debugging! :o) Thanks a bunch!!
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 for teaching me a better way, funky shirt man.
I tried the event listener in an incognito window and it still pauses on the wrong line of code. Any suggestions?
i find it impossible to edit my code at the end of the video to test if it works just as you did. seems like it's read only over here. any ideas why?
does anyone know if it's possible to edit this snippets from an external editor? I miss a lot of shortcuts and other helpers.
I was just happy that I knew the problem before going through the debugger...Whoop Whoop im learning
Wow. I never knew. Very useful ! Thank you.
I feel like I am 10 levels up in web developing in 10 mins :D thanks
Probably I should watch this video before 20h of debugging :D
this needs to be updated, it doesn't work like this anymore
How did you open console? What is the short cut key ?
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.
thank you for the wonderful tips and tricks
@5:20 scope > local/global values currently defined
You're awesome, things for the tut :).
It really helped me @ the right time. Thank U so much.
It doesn't work when I use incognito tab?
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.
You save my life starLord