Tips and Tricks for Debugging JavaScript
VloĆŸit
- Äas pĆidĂĄn 28. 02. 2022
- Want to know how to become a better JavaScript developer? Well, the more efficiently you can debug your code, the better off you'll be. In this video, you'll learn about helpful functions to use other than just console.log(). You'll also see how to use the debugger statement as well as set up true debugging inside of VS Code.
Advent of JS - www.adventofjs.com/
STAY IN TOUCH đ
Check out the Podcast - compress.fm
Newsletter đ - www.jamesqquick.com/newsletter
Live streams on Twitch đ„ïž - / jamesqquick
Follow me on Twitter đŠ - / jamesqquick
QUESTIONS...?
Join the Discord Server đŹ - / discord
Want to know what hardware and software I use? www.jamesqquick.com/uses
Learn Web Development đ - www.jamesqquick.com/courses
You missed, console.trace , super useful to know the call stack when debugging complex applications
Honestly the biggest piece of advice that I have to beginners and even some intermediates really is to just read the error messages. I can't possibly counts the amount of people who post on forums asking "why is my code broken?" and post an error message that says on line 30 there's an unexpected bracket. ALWAYS always read the error messages thoroughly before asking for help.
I agree
Yes thatâs great suggestion
you saved my life with this little piece of knowledge that apparently you don't find anywhere straightforward..
I wasn't aware that console.assert(), console.time() and console.timeEnd() existed. I also found the tips re: debugging in VS Code to be helpful. Also the reminder to step away is always a good reminder. Thanks for taking the time to put this helpful video together.
Something that I didn't see you mentioning was that when you add a debugger, you can also use the console at that scope. I find that really useful.
Wow, thanks so much!. I don't know how many times I set a breakpoint in Chrome and press F5 to continue running as if I was in Visual Studio (C#) and reloaded my app. This was SO helpful!
I personally use styled console.logs for warnings, alerts and oks. If theres another kind of message i can change styles also is a bit limited but for me is good enough. Thanks for the video! Ive been thinking about this lately and makes me want to build my own mini debugger i can use on every project. Again, thanks!
The console.table one alone made this video worth it! Thanks so much!
The most clear and concise content I've seen on the topic, thanks
Yassss!!!
I only said a couple weeks ago to a couple of colleages that there isnt many helpful resources out there to help with debugging, and its not something you generally get taught/shown on courses. Thank you, this has been super helpful for me as a junior, especially as I want to become more efficient at debugging and move away from console.logging everything!
Wow! This is amazing to hear!
so good tips for debug projects.. thank you for the video James!
Yeah excited to hear you have entered the Vim world. I think the VS Code extension is a great entry to Vim, keep us updated please.
Thank you so much, this is going to be very very useful!!!
I think in many non-trivial real world scenarios like when you need to debug a web app in production that uses a library, it's more practical to use just the browser developer tools to debug - adding DOM/Event Listener breakpoints, watch expressions, black boxing library code, etc.. One thing that stumps me is that when I try to inspect event handlers that are registered on a button, I usually only see minified library code which doesn't help. I think doing a video on all the Chrome DevTools debugging features would be really helpful, and also when it wouldn't work like when code is obfuscated on the client.
Agreed. I came here expecting this video to cover more browser runtime debugging solutions with DevTools.
Don't care much for logging objects out in table format and most intermediate developers are most likely already familiar with all the other console methods mentioned.
I definitely agree, I have spent countless hours trying to find out where a legacy application is failing hard on new requirements and I have to hunt down event listeners and the like for clues. In the Sources tab of the developer tools there is a button {} that will help format minified files to make it easier to read
Regarding minified library code, the browser DevTools also support source maps. That means, they maps the minified statements to the original code for debugging.
Another thing related to that is that the Firefox DevTools show when they recognize code of a specific library like React, Angular, etc. That makes it a little easier to black box them.
Assert and debugging is really useful, thank you!
Awesome, the console table is awesome to know about!
you're the best man. this is literally the last quesiton on these interview questions (my friend is a team lead and sent me the interview quesitons lol)
"...Can you please describe 3 ways you could use the Developer Tools in the browser to further debug the impacted Javascript."
my rough draft answer right now is
1) check the console for errors
2) check event listeners and breakpoints
3) use debugger; and console.log/dir/table/assert/time/timeLog/TimeEnd/warn/error/count/countEnd/trace
i honestly cant wait to try this out and show this to my colleagues! Thank you so much!
Yeahhhhhh!!!
Thanks for sharing I love your video !!Please keep posting
Thank you kind sir. Console.table has been my go to since day dot.
Would be useful making a video on spa debugging experience on the big three (vue react angular) or debugging experience on some js code that pushed thrue webpack.
Thank you, I did not know the table and dir operations in console.
Wow, i didn't know "debugger" existed! Useful for debugging inline js(non external js file), which i couldn't set a breakpoint on! đ
Very useful. Thank you!
Super helpful dude, thanks for sharing!!!
Didn't know console has so many different methods đ Thank you for this material
Yeah there's so much out there!
Great video,James this is so significant
Thanks so much
Btw. if you really want to log something, you don't even have to modify your code by inserting console.log(). The debuggers in the DevTools and VSCode allow to set so-called logpoints. Those work similar to breakpoints but log the variables you provide like a console.log() at that line of code where you set them.
How to do that in vs?
Wow this is an amazing feature, thank you for pointing this out.
And here I thought it was some kind of video about debuggers and breakpoints, but half of it is actually about console.logging like a boss!
You're the BEST, Thanks so much.
This has just become my fav video on youtube. Cheers
Thank you very much! Very helpfull
which theme you use? It's beautiful
I already know console.dir shows more information than log, but element usage of console.dir is very impressive!
Thanks James, this was very useful!
My dude my favorite tip has to be throwing variables is an object for console logs. So simple but so freaking useful. I'm mad I never thought of it before. Thank you!
That one tip was pure gold
Very helpful video. Thanks! James.
Great stuff as always
Nice video - does it matter where you put the debugger statement if you're also adding break points?
Never knew about console.table .. Thanks đ
vsCode debugging only, but Your tips for console - awesome!
Great video. Thanks, James
Amazing! Thank you
I was looking for a normal crack for a long time and stumbled upon you, thank you very much
Amazing, thanks !
Thank you for the video. Maybe you could create a video about debugging TypeScript using debugger in VS Code ?
Great! Thank you for the help
Glad you enjoyed it!
Fantastic Video! Thanks!
What is the theme you are using in VS code? It looks really nice!
nice - didn't know about the dir, or the {} console options
Duuude I've been debugging with stone age techniques..... Thaaaanks!!! Fastest Liked + subscribed I've ever done đ
Console table will be handy. Thanks
Great video đ. Side note: when you impersonate different people, it might help to face the characters against each other (person one looks right, person two looks left).
haha yeah I'll get better at this!
I did enjoy the video, the assert is something new for me. Also try turbo console log (vscode plugin) đ I recently discovered it đ
Yeah Iâve been meaning to do a video on it!
@@JamesQQuick Nice!
Great. Thank you
Honestly, it's been fifteen years since I began coding as an amateur, still an amateur today. But I always stuck with my console.log as a multimeter pin, I thought I needed nothing else ... I thought.
If I could give you 10 thhumbs up I would ! ^^
Extremely helpful video!
3:52 didn't know about that. big thanks
Fantastic! Thanks for the video!
You're very welcome!
I tried to debug with vscode but with a typescript code, it worked but the code was unfortunatelly translated to js, nevertheless, great video, very helpful, if you have some tips to do similar things with typescript I'll watch
Thank you!
Great introduction on Debugging in JavaScript. - Thanks, James
{2022-03-09}
Console commands seemed so useful until my code started getting really complicated. Thanks for the debugger tips, using dev tools on chrome would have saved me so much time in my last project.
This is sooo true! lol
Magic and so good thx for your passion
haha glad you enjoyed it!
THANK YOU!
Amazing, thanks ! Do you know if it works with VSCode Remote ?
Wow...can you tell me the which font family you used in the vs code... it's looking awesome
..đđ
Debugging is so much more powerful than console logging. Being able to pause execution (breakpoint) and discover what really goes on (step through a flow) because of the state of variables (you can see all variable values - and even change them for testing) is so so so more much valuable.
And you don't modify your code.
Serverside code debugging can be tough to setup, though. That's could be a follow up video
also you can log that same variable and know what is going on
@@jcoucelanga4373 try doing it 30 times over, and logging 20 variables. Just not the same.
@@dingusfartacus9624 Meh, I insist, some specific issues demand debugging, but 99% you can do it faster with advanced logs
Thanks, usefull
Thank you Sir !!
You're very welcome!
Important for developers to know.
thx man!
Great info.
I have a monorepo project i work with, and the debugging by default takes a huge amount of time so i need to configure the "outFile" property. Could you make a video showing the debugging of something like a monorepo that uses lerna?
Cool, thank you
Great video! Can you please also tell me the font and theme of VS Code you are using?
i think `midnight synth`
Nice! Thanks! đ
You're very welcome!
Thanks!
vim plug
Great job, thank you!
Awesome tips! Thanks!
By the way, what is the name of your vscode color theme?
have you found out? he is not 'quick' responding
@3:50 = syntactical sugar. {length} simply creates a new object {length: length} ... useful for debugging sure but it's a feature of Javascript overall, not just for debugging
Great video đ
Nice information.
Just one question
Which theme is that..name please?
Thanks..
I really liked it
Thank you
Problem I find with console.table vs console.log is when there are a lot of variables inside the array or json. console.table tries to squeeze them all into the window. Sure you can expand it out with the mouse but then you hit the responsive view and sometimes there is responsive specific code. console.log might be dirty but sometimes it just works. console.time is a nifty tool!
Nice, learned a couple of console methods I wasnât aware of (never had to use them). But, why wouldnât you use the developer tools in the browser? Same results, less effort.
Thanks for the video. [Q] - Debugger in vscode is built-in or do we need to install the "Debugger for Chrome" extension?
Itâs built in now :)
@@JamesQQuick Wow that's cool. Thanks You :)
Nice. What theme are you using in VS code? I really loved the cursor animation.
The cursor animation is a setting in VS code, no matter on the theme - forgot the name but look in the settings and search for "font"
I think the theme is ugly as fuck but the cursor animation is something from VS Code, I don't remember the name of setting though.
"editor.cursorBlinking": "expand"
I've also recommend an Extension called Turbo Console Log đđ
Great teacher
what color do you use for the Cobalt 2 theme?
Could you please tell which theme you are using?
Any idea how to view Mongo doc id during debugging? Debugger usually shows the binary value for them.
That is really cool!
Glad you enjoyed it!
In complex apps based on react IDE debugging does not work so well as in Chrome. In IDE it tracks many internal processes coming out from react itself and which is useless to track. In Chrome it works much better way as you can stop interpretator and see all vars around and type code in console and it does not track internal react code coming from library
Thanks James. I just found out I dont know everything :)
hahaha everyone has something to learn every day!
You look really tired buddy, take some rest. We like you content but you will be able to keep making it only if you take care of your health. Wishing more power to creators and contributors like you.
Yeah I noticed that as well. Glad someone else pointed it out too. Take care @James Q Quick!
What extension is that gives you the animated text cursor? That is so cool.
It's a setting called like cursor style I think lol