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? =)
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
@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*.
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,
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??
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.
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?
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
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
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.
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!
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
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
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.
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.
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
Learnt some pretty good debugging lessons, specially the breakpoints and watch tool are something which will come pretty handy. thanks for the Knowledge Transfer. :)
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.
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 :)
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!
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.
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.
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.
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?
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
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 ?
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 :)
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;)
I'm studying the JavaScript console today! Just a quick warning, when I'm on web pages (like Google, UA-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?
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.
I'd guess it was made that way just so it would be easier to examplify the issue and the solution, since it would all be inside one block of code, but your sollution would be the correct one.
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
Good video. Covered enough basics of debugging in just 7 mins and Demo offers a nice example to try it out quickly.
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 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!
Just started learning javascript and someone sent me a link to this vid to improve my workflow, very helpful!
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
This is so powerful. I never knew this to be so cool and awesome. I want more...
Brilliant! I should have viewed this YEARS AGO! THANK YOU!
Thanks - Could very much have used this video many years ago, so very great for newbie debuggers.
@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
Less than 2 minutes in and I have already learned something new. Thanks!
This 7:27 video just saved me 5,000 + hours of hair pulling, primal scream therapy, and general rage and frustration. Thank you GCD!!!!!!
Great explanation! All this time I was living under a rock trying to debug manually lol, thank you!
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
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.
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
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.
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
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 to this video I was able to fix a problem I was trying debug for hours. Thank you so much!
Liked your video. Good Resolution. Great Clothes.
Anyone know why it pauses on line 15 for me but line 14 for him? at 2:42
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.
The example web page now stops on line 15 evaluates at inputsAreEmpty and finishes up at line 20
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!
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
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?
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.
Hope will start to use DevTools > Sources from today. But need a deep drive to learn more. Thanks for the intro.
This dude knows it all. You will be my teacher
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 was an absolute joy to watch this! Thank you
@5:20 scope > local/global values currently defined
Though manually parsing the strings is effective, a better way is to use the .valueAsNumber property instead of .value.
Awesome series, keep it up!
Love getting debugging advice from Chris Pratt :)
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
This helped me get rid of an annoying breakpoint that somehow made it's way into all my Vue projects.
Here from The Odin Project. Good luck everyone! :)
Learnt some pretty good debugging lessons, specially the breakpoints and watch tool are something which will come pretty handy. thanks for the Knowledge Transfer. :)
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 ).
It doesn't work with minified code with source maps. All the variables in the list of Local are minified.
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.
Shirt's on point. Glad to finally see a little bit of fashion coming into the development world. Seriously.
even in incognito mode i cant get the breakpoint to pause on the correct line. I followed the directions exactly
I love this tutorial! Thank you
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 :)
This is enough for development I think
Remaining things you can learn by your own and that's best practice
Nice tools, I will use them. These are tools that have been available in visual studio for a long time. They replaced printf() debugging
Eh, thanks alot man. You've exposed things I've never even heard of or thought possible
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!
EXCEPTIONAL! Just what I needed to get me going on debugging! :o) Thanks a bunch!!
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?
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.
I was just happy that I knew the problem before going through the debugger...Whoop Whoop im learning
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
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
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.
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
I feel like I am 10 levels up in web developing in 10 mins :D thanks
how can i disable an spesicif JS file. ( i wanna it work but i dont wanna see warning or debug) ?
Thanks so much, you are the best. Finally i learnt something new today.
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?
would "addend1" var be available in console if you hadn't opened source panel?
In Firefox you can add certain js files and folders in ignore list while debugging. This feature doesn't work properly in Chrome :(
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
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 ?
Thank you for step by step explanation!
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 :)
thanks for teaching me a better way, funky shirt man.
In angular, we have ts files but event listener breakpoints goes to the javascript file. Is there any way to point to ts file?
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;)
I'm studying the JavaScript console today!
Just a quick warning, when I'm on web pages (like Google, UA-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?
It really helped me @ the right time. Thank U so much.
This dude is mad steezy. Dank vid.
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
Good one, I like the background 👨💻
Probably I should watch this video before 20h of debugging :D
Wow. I never knew. Very useful ! Thank you.
2:53 how to remove the very extension?
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?
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 ... ?
How do I get to my source code when using webpackconfig? I see only bundle.js in devtools sources.
When can devtools dynamicly change non .js files, ie inline javascript in the html file
I tried the event listener in an incognito window and it still pauses on the wrong line of code. Any suggestions?
does anyone know if it's possible to edit this snippets from an external editor? I miss a lot of shortcuts and other helpers.
A page's video and other moving objects pauses when I open devtools. How do I fix that?
How did you open console? What is the short cut key ?
You tought me continue-startover-stepinto-stepout,event listener breakpoint, watches, modifying the js code in place and save to see in work.
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.
Why does the function name is "getNumber" while it returns a string, the parseInt should be in that function! 🙃
I'd guess it was made that way just so it would be easier to examplify the issue and the solution, since it would all be inside one block of code, but your sollution would be the correct one.
Easier to give you a clear bug.
how to open console when source window with debugger is open ?
His jacket is so lit, I want it!