debug your Deno programs with VS Code

TL;DR — This is a way to debug your Deno programs in VS Code's debugger. It might not be the BEST way, it is just the first working way I found.

Whoooooooooo, Deno 0.39 supports --inspect-brk and that means:

🎉 my life is about to get ♫ awesooooommmme ♪　🎉

I like, totally stan Deno, and like, watch Ryan Dahl presentations about it when I come home drunk late at night even though I've already seen them.

But, I'm not a masochist, which means I can't use a programming environment for realz unless is has a reasonable debugging story. And for me personally, the minimum bar for reasonableness on that front is some kind of decent GUI debugger with breakpoints. Could be Xcode, Jetbrains IDEA, Chrome/Firefox/Safari dev tools — anything like that.

Deno recently added support for --inspect and there was much rejoicing. By me, I mean. On my work Slack. That rejoicing looked like this:

So *boom!* as we millennials say, around our mouthfuls of student-loan-financed 🥑🍞avocado toast, the PROBLEM IS FUCKING SOLVED AND I AM ON MY WAY TO EASY STREET!

Except... ew, why do I have to like use this grody Chrome thing?

I'm not like, writing some web application. I'm writing a cerified organic sustainably-farmed grass-fed serious, real, can totally deadlift 2.5x its own bodyweight app.

So I don't want to debug it in Chrome, and maybe I don't want to install that grotesque emblem of late-stage capitalism on my machine, even. I want to debug my program directly in VS Code!

And now I can! I AltaVista'd it today but I couldn't find anything that told me how to do that, so I just kept trying shit using the trial-and-error-plus-alcohol technique until I found the solution, which I converted into a 178-minute action movie featuring me as Idris Elba and him as me, so... enjoy! 👇🏻

For those people who were like um fuck off I'm not clicking your shitty video dude I will also explain it in words:

First, add an entry like this to your launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Deno debuggery",
      "port": 9229,
      "protocol": "inspector"
    },
  ]
}

Next, run your Deno program on the command line like so:

deno --inspect-brk main.ts

It will say something like Debugger listening on ws://127.0.0.1:9229/ws/c663d4b0-84f9-462f-ae37-fd79a73edd91. But it will be impatiently thinking, Hurry up and debug me, numbnuts!

So press F5 to debug it. 🥑🍞*boom!* You see the debugger stopped, saucily daring you to proceed. You haven't entered your program yet.

The final magic: step out, step out, step over. For reasons unknown to me, breakpoints set with VS code (the little red dots in the left margin of the code editor) will not be hit unless you do this little dance.

But if you do the dance, it will work. 🎉 LET US ALL REJOICE!! LET US ALL REJOICE!! 🎉

Debug your Deno program, and give the 🖕🏻to The Man!