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 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.
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!
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.
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.
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
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 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!
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 ! ^^
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!
Resume : Console.log("length:",length); Console.log({length}); Console.table(var); //better représentation of array Console.assert(password!==undefined); Console.error("this should not be undefined); //print in red color Console.warn("this should not be undefined); //print in yellow color Console.time(); => Console.timeEnd //print the duration between debugger; //function to launch debug step in browser 9:20 tuto in vscode debugging config
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.
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.
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
@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 👍. 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).
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.
It looked as if you were clicking the source location link in the Chrome console to automatically jump into the right place in VS Code. This was probably just a nice edit and not the actual result of clicking that link. Is there no such tool/plugin/extension for Chrome/VS Code to jump from the console output directly into the VS Code source? That would be super nice!
James: "we are all guilty of using console.log to debug... but there are lots of other tools..." also James: "so we can start by logging..." lol seems legit 👍 great video..
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?
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.
You missed, console.trace , super useful to know the call stack when debugging complex applications
you saved my life with this little piece of knowledge that apparently you don't find anywhere straightforward..
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
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.
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.
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
Thanks!
The console.table one alone made this video worth it! 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.
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.
which theme you use? It's beautiful
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
Didn't know console has so many different methods 😅 Thank you for this material
Yeah there's so much out there!
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!
The most clear and concise content I've seen on the topic, thanks
Yassss!!!
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.
What is the theme you are using in VS code? It looks really nice!
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!
This has just become my fav video on youtube. Cheers
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!
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 ! ^^
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!
Duuude I've been debugging with stone age techniques..... Thaaaanks!!! Fastest Liked + subscribed I've ever done 😆
Assert and debugging is really useful, thank you!
You are a life savor. Thank you 🙏
Resume :
Console.log("length:",length);
Console.log({length});
Console.table(var); //better représentation of array
Console.assert(password!==undefined);
Console.error("this should not be undefined); //print in red color
Console.warn("this should not be undefined); //print in yellow color
Console.time(); => Console.timeEnd //print the duration between
debugger; //function to launch debug step in browser
9:20 tuto in vscode debugging config
great!
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.
Awesome, the console table is awesome to know about!
Thank you, I did not know the table and dir operations in console.
You're the BEST, Thanks so much.
Thanks for sharing I love your video !!Please keep posting
I was looking for a normal crack for a long time and stumbled upon you, thank you very much
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
Wow, i didn't know "debugger" existed! Useful for debugging inline js(non external js file), which i couldn't set a breakpoint on! 👍
Could you please tell which theme you are using?
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 James, this was very useful!
I already know console.dir shows more information than log, but element usage of console.dir is very impressive!
vsCode debugging only, but Your tips for console - awesome!
so good tips for debug projects.. thank you for the video James!
Great video. Thanks, James
Super helpful dude, thanks for sharing!!!
i honestly cant wait to try this out and show this to my colleagues! Thank you so much!
Yeahhhhhh!!!
Console table will be handy. Thanks
Just one question
Which theme is that..name please?
Thanks..
I really liked it
@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
That's public service, James. I really appreciate it.
Great video! Can you please also tell me the font and theme of VS Code you are using?
i think `midnight synth`
3:52 didn't know about that. big thanks
Extremely helpful video!
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 :)
Thank you kind sir. Console.table has been my go to since day dot.
vim plug
Very helpful video. Thanks! James.
Fantastic! Thanks for the video!
You're very welcome!
Never knew about console.table .. Thanks 👍
Fantastic Video! Thanks!
Hi what's the theme you are using in vscode?
What's vscode theme are you using?
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!
Thank you so much, this is going to be very very useful!!!
Awesome tips! Thanks!
By the way, what is the name of your vscode color theme?
have you found out? he is not 'quick' responding
What plugins do you use ?
Thank you for the video. Maybe you could create a video about debugging TypeScript using debugger in VS Code ?
Woow, what's that VSCode theme?
Bump.
Who cares? It's ugly as fuck.
@@leoMC4384 actually, I like it 😖
How can I get that purple theme for vscode?
Great video 👍
Thank you very much! Very helpfull
What's inside the inspiration folder 🤔
Great introduction on Debugging in JavaScript. - Thanks, James
{2022-03-09}
Please someone tell me which theme he is using in vs code
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!
Which font are you using in vscode?
what color do you use for the Cobalt 2 theme?
Amazing, thanks ! Do you know if it works with VSCode Remote ?
Great video,James this is so significant
Thanks so much
Important for developers to know.
It looked as if you were clicking the source location link in the Chrome console to automatically jump into the right place in VS Code. This was probably just a nice edit and not the actual result of clicking that link. Is there no such tool/plugin/extension for Chrome/VS Code to jump from the console output directly into the VS Code source? That would be super nice!
How is the vim extension so far?
What theme are you using?
Wow...can you tell me the which font family you used in the vs code... it's looking awesome
..😍👌
James: "we are all guilty of using console.log to debug... but there are lots of other tools..."
also James: "so we can start by logging..." lol seems legit 👍 great video..
what font are you using?
Nice video - does it matter where you put the debugger statement if you're also adding break points?
Any idea how to view Mongo doc id during debugging? Debugger usually shows the binary value for them.
Great teacher
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
nice - didn't know about the dir, or the {} console options
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!
Any good debugging tools with reactjs?
Does someone know how to get the Firefox Debugger (vscode extension) when using WSL2?
I've also recommend an Extension called Turbo Console Log 👌😎
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?
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.
Thank you Sir !!
You're very welcome!
Amazing, thanks !
Thanks James. I just found out I dont know everything :)
hahaha everyone has something to learn every day!
Great content. Thanks .could you please share the theme you are using please?
Midnight Synth :)
@@JamesQQuick thank you.
Brilliant ❤️❤️❤️
Amazing! Thank you