Thank you Burke Holland for this amazing article!

Over at css-tricks.com, the elegant and both vertically and horizontally centered Chris Coyier wrote a post called “How to stop using console.log() and start using your browser’s debugger.”

It’s a good, concise post, and he makes some great points about the advantages of really getting to know and love your browser’s devtools for debugging JavaScript vs relying on console.log .

I’ll be the first to admit that I overuse console.log .

Console.log Anonymous

Hi. My name is Burke and I use console.log everywhere.

It’s been my go-to for so long. And console.log is a vast improvement over alert . I have personally written many an app that was built with “Alert Driven Development”, which, aside from being the developer equivalent of flooring it on a road with speed bumps every 80 feet, is also a pretty awesome acronym.

I try and learn my developer tools and lean on a proper debugging experience. And yet, every time I open the browser developer tools, there is a still small voice in the back of my mind. It whispers to me. And it says…

You don’t really want to do that.

And are you really going to wear that shirt today? You wore it yesterday. And I’m pretty sure the day before too.

Am I alone in feeling this way? Why do I resist the browser dev tools? And why do I have to change my shirt every day?

I think I know the answer here.

I think that debugging your JavaScript in the chrome developer tools is not the way our brains want to work. I would like to propose that what we really want is to debug our code in the same place that we write it.

How did we get here

We’ve been leaning on the browser developer tools for debugging our JavaScript for so long that we’ve somewhat forgotten that this is not how it’s supposed to work. Your code should all be in your editor and you shouldn’t have to go somewhere else to work with it.

You’d be hard pressed to give me an example of another language/platform where people write their code in one place and debug it in another. That would be like making a big pot of chili and then making a second pot identical to the first so you can figure out if the first one has enough salt or not.

Browser development is wildly different than most platforms, though. It’s impossible to know which framework you will be using, how your project is going to be set up and what configuration your project needs to run. To make matters worse, JavaScript in 2018 is legitimately complex. We’ve got Webpack, Babel, TypeScript, Source Maps and most of that is configured by your CLI of choice. Your code is not the same when it runs as it is when you write it. Not even close. That makes it impossible to debug it anywhere but the browser.

Or does it?

Most people know that their editor can debug browser applications, they just aren’t sure how to set it up because it doesn’t “just work” out of the box. Fortunately, VS Code provides a lot of smarts and guidance for getting your projects set up to run and debug in VS Code.

Debugging Browser Apps in VS Code

VS Code can debug browser apps with a pretty good deal of flexibility. It uses the Chrome Debugger and the same debug port/protocol as the Chrome Developer tools.