DEV Community

Cover image for The definitive guide to JavaScript Debugging [2021 Edition]

The definitive guide to JavaScript Debugging [2021 Edition]

Tapas Adhikary on January 05, 2021

Introduction As developers, we’ve traditionally rooted out errors in our programs (we’ll call them bugs from now on if that’s ok) by usi...
Collapse
 
leob profile image
leob

Good overview, but somehow I'm still resorting to console.log more often than not ... why? Two reasons:

1) asynchronous code makes "stepping" a pain (stepping into, that is)

2) transpiling (Babel) makes things painful, more often than not I fail at properly setting up source maps

Could be me, but as a result I always find myself reverting to the tried and true "console.log" way.

Collapse
 
atapas profile image
Tapas Adhikary • Edited

Thanks, @leob for your thoughts!

For # 1, do you use the async switch in the debugger tool?

image

For # 2, Oh yes, agree! Especially when the source maps are missing.

Collapse
 
leob profile image
leob

Wow, that's a great tip for #1, never hear of that, thanks!

Thread Thread
 
atapas profile image
Tapas Adhikary

Glad, it helped 🙂

Collapse
 
darthwalsh profile image
Carl Walsh

Something I'm excited for is Edge browser has a VS Code extension that incorporates the DOM Elements debug panel into VS Code (IIRC), which is the main reason I still need to use DevTools. I tried and failed to use both the DOM extension and the Source extension; you need some incantation to bring them both online at the same time.

Collapse
 
davide profile image
Davide Scarioni

Great content, thank you for sharing it!

Collapse
 
atapas profile image
Tapas Adhikary

Thank you!

Collapse
 
alimobasheri profile image
MirAli Mobasheri

This is great. Thanks for sharing such a detailed post!

Collapse
 
atapas profile image
Tapas Adhikary

Thanks a lot Mir! Glad you liked it.

Collapse
 
tutrinh profile image
Tu Trinh

Great post. Learning a lot.

Collapse
 
atapas profile image
Tapas Adhikary

Great thanks! Glad it was useful.