Debugging JavaScript - Are you doing it wrong?

Learn a better way to debug your JavaScript.
Video from WellPaidGeek. Check out his channel: / @wellpaidgeek
--
Learn to code for free and get a developer job: www.freecodeca...
Read hundreds of articles on programming: medium.freecod...

[@lindascoon4652]

This video is 4 years old and I've not seen this video . Life could have been so much easier better late than never I guess

[@clarinet800149]

That 4 minutes will save me hours of console logging and rebuilding my application in the future. I never understood how debugger worked because no one took the time to walk me through it. Just awesome. Thank you!

[@CyberTronXXX]

Debugging is like being a detective in a crime movie where you're also the murderer.

[@spoodermen2530]

im a baaad man....

[@jotibayadav1318]

Best video on debug in such a short time rather than so many huge videos

[@obam-992]

i thank you have awoken my third eye now i can recreate the entire universe within a browser

[@christianlanoire7541]

That’s the way to explain, right to the point, you deserve to be well paid :)

[@Stauf1186]

Wouldn't it be better to just set a breakpoint in the developer tools rather than adding anything into the code to force it? That way you wouldn't have to go back and extract the debugger command later, particularly if you have several of them lying around within the code.

[@WellPaidGeek]

I see what you mean, but at the same time you'd have to navigate to the right place in the sources tab within the developer tools, so it's easier to initially add the first breakpoint within your IDE, since you'll probably already have the offending code open in there. A linter should pick up stray debug statements. But yes, what you're proposing is still a viable alternative.

[@replicar66]

I agree with the above. Changing code to do debugging in general is a bad practice. Chrome debugger works relatively well with the source maps and all that jazz without needing this. Slippery slope of weird coding practices. It's a nice trick but we'd have years of slowly replacing leftover console.logs to start replacing leftover these language specific debugging statements.

[@HashimWarren]

I heard people mention this technique but never saw it demonstrated. Than you! Very clear!

[@asyncasync]

WebStorm has this functionality where you can add the break point by just clicking the appropriate line number. Just like in the dev tools. No need to write that debugger line and remove it later.

[@EminoMeneko]

I agree. When you're used to classic dev such as Java, C#, C and the like the IDE takes care of it all. But here we work on a browser. The flow is not exactly the same.
I knew times I dreamt of such tools.

[@FredySandoval_123]

this is the future of coders, the best debuggers

[@Dummecook]

That's all good and can be used in someway, but, i think, breakpoint's in devtools are more usable anyway.

[@MCSMIK]

Didn’t know about this. Thank you. Will try it out!

[@WellPaidGeek]

Thanks!

[@AnimeTeikoku]

This video needs to be on the front cover of any HTML-JS books, lectures and courses, like above the author's name

[@frankcoding3753]

Cool stuff. I was also working a modern review of debugging with console object in JavaScript :)

[@maxw5667]

I can't believe I've been coding for 3 years and I never thought you could put breakpoints in javascript - how many hours have I wasted

[@pupfriend]

console.log() fan club represent!!

[@aromal_anil]

freeCodeCamp has helped me a lot in my way. And now I have got a new piece of knowledge !

[@TV-vu9fg]

Thanks for teaching this way and I will use console. log

[@GameRock06]

This is a life changer

[@Acid31337]

Logging is good way to find problem

[@zsanettvarga5535]

I wish I knew about it earlier 😐

[@Omar-p9r3c]

thank you for this :)

[@johncenasmokie5690]

nice video thaks for sharing

[@rajashekhar433]

Coverage, performance, animations, sensor in chrome

[@JS-ys2uk]

Freecode camp reinforces console.log() debugging through their curriculum unfortunately! Should have people using the real debugger from the get-go and should also teach debugging before they get beyond basic javascript!

[@LowFrequency]

What os are you using ?

[@whereismycheese5481]

console.log -> debugger!

[@KendaBeatMaker]

Whatttt!!!! Thank you

[@Chaaos2]

Very cool

[@WellPaidGeek]

Thanks.

[@shanibhatti2148]

Thanks♡

[@Meleeman011]

Wonder if this works in node

[@WellPaidGeek]

If you have the browser setup correctly and run the node app with --inspect, then yes!

[@shazkingdom1702]

😜 😂 console prints 😬

[@mehrankurd]

ok

[@ramsay2113]

A debugger would never have been needed if the project was using TypeScript

[@shabblabbat]

Good lord, haven’t ever used a console.log in 15 years, just set a breakpoint. Who’s teaching these codemonkeys these days, philosophy majors?

[@muhammadzaakirmungrue3146]

This video makes no sense, how did the App magically load itself into the browser ? Apparently he started teaching before the video started and he did not realise that the video had not yet started !!! LOL How could you give a tutorial and the most important part of the tutorial was completed before the video even started and why is this so popular ? This is not a tutorial this is just you showing a different way to use the the debugger

[@hitekboy2507]

Rubishhhhhhhhhhhh

[@WellPaidGeek]

Thanks for your eloquent criticism of my video.

[@hitekboy2507]

Mike Anon ChupBeyLavre

[@hitekboy2507]

WellPaidGeek VeryNiceVideo I love it

[@Ashiq619]

Looks like mahira is from pak... If u cant appreciate good work by people dont atleast spoil their videos by ur cheap comments

[@hitekboy2507]

abhijeet badale its my personal comment and dont jump into anothers comment dont try to steal someone ideas create ur own. GoodWork always stay far ones cheap/ costly cmnt and makes 0 effect ...SamhjeBeta

[@SuperWeedPower]

good to know, I was going crazy with console.logs

[@WellPaidGeek]

I know the feeling!

[@dwightmckenzie2019]

I like how you can reverse back up lines and such. With this technique.