Tips and Tricks for Debugging JavaScript

Показать описание

STAY IN TOUCH 👋

QUESTIONS...?

Рекомендации по теме

Комментарии

You missed, console.trace, super useful to know the call stack when debugging complex applications

ilijatrbogazov

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.

AdamGaffney

you saved my life with this little piece of knowledge that apparently you don't find anywhere straightforward..

florinbujoreanu

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.

geraldleroy

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.

alejandro.mangione

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!

EdwinPWeston

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!

gabrielv

The console.table one alone made this video worth it! Thanks so much!

Sledgeh

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.

willadams

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!

rachellejanssen

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!

AlleyDev

The most clear and concise content I've seen on the topic, thanks

MuratKeremOzcan

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.

invictuz

so good tips for debug projects.. thank you for the video James!

jesusvegaguerrero

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

skippyzk