29

How do we configure .vscode/launch.json to debug Deno projects?

The IntelliSense the VSCode provides when I was in configurations didn't offer an option for Deno. Or is there an extension for this?

ClaireL
  • 443
  • 6
  • 10

4 Answers4

32

You need to attach the debugger, as per the deno manual.

Create .vscode/launch.json replacing <entry_point> with your actual script and then F5.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Deno",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "deno",
            "runtimeArgs": ["run", "--inspect-brk", "-A", "<entry_point>"],
            "port": 9229
        }
    ]
}

It will stop at the breakpoints you set on VS Code, tried here and it worked fine.

About the VS Code plugin:

Official support in plugin is being worked on - https://github.com/denoland/vscode_deno/issues/12

Evandro Pomatti
  • 13,341
  • 16
  • 97
  • 165
  • 19
    Upvoted. I also had to add `"outputCapture": "std"` to see logs in the debug console. – ford04 Jun 02 '20 at 09:39
  • 3
    after spending hours on github and google, this worked in a second. Note: had to add `"outputCapture": "std"` for console logs. thanks @ford04 – Radical Edward Aug 30 '20 at 15:23
  • The link to the deno manual seems to be dead. – TrentVB Feb 02 '21 at 17:21
  • @TrentVB it did in fact changed. I updated in the answer, thanks for pointing that out. – Evandro Pomatti Feb 02 '21 at 20:23
  • 3
    The debugging will not work with this configuration. You also need to set `"debug.javascript.usePreview": false` in your settings because https://github.com/denoland/vscode_deno/issues/12#issuecomment-656406826 – phil294 Mar 01 '21 at 03:02
  • And now that the preview has become the default, that setting is useless again, and Deno breakpoints don't work yet again. No idea how to fix it. – phil294 Apr 07 '22 at 22:46
  • 1
    All this worked for me, but I needed to change `"port"` to `"attachSimplePort"` [as described elsewhere](https://github.com/denoland/vscode_deno/issues/12#issuecomment-658957984). – adiabatic Nov 20 '22 at 01:16
  • why is it `"type": "node"` but not `"type": "deno"`? Is it that I have to install node before deno to run the debug? – Ooker Jul 21 '23 at 07:48
13

The official VS Code Deno extension comes with handy debug support starting with v2.3.0.

Screencast from the PR:

enter image description here

Fresh projects

You can already press F5 to debug the active file without launch.json (quite useful).

To auto-generate launch.json with a Deno entry: Press CTRL+Shift+D (Open debug view) → "create a launch.json file" → Deno

Add Deno entry in existing launch.json

Press Add Configuration... in opened launch.json (see screencast above). F5 will now trigger the currently active debug launch action.

Launch active file

To debug the currently active file in case of an already configured launch.json, change: 
{
  "type": "pwa-node",
  "program": "${file}", // change "program" value to "${file}"
  // ...
},

Create debug selection shortcut

// Inside keybindings.json
{
    "key": "ctrl+alt+d",
    "command": "workbench.action.debug.selectandstart",
    "args": "Start debug task"
},

The shortcut is called "Debug: Select and Start Debugging" - see also this related post.

Enable log output in Debug Console

To have log output shown in the debug console, I still needed to add "outputCapture": "std" to the config entry. More infos:

Related

ford04
  • 66,267
  • 20
  • 199
  • 171
  • 1
    Deno launch configuration template seems to have been (temporarily?) removed again, as you need to insert it manually now – phil294 Mar 01 '21 at 01:23
  • 1
    This needs upvotes. This answer made me restart and F5 indeed works out of the box. After which I auto-generated the launch.json like ford04 suggested and just added outputCapture and the whole thing worked. – Gerben Rampaart Apr 22 '21 at 07:57
10

to debug current file, you can use below configuration :)

"outputCapture": "std" allows deno to print to VS code console

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Deno",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "deno",
            "runtimeArgs": ["run", "--inspect-brk", "-A", "${fileBasename}"],
            "outputCapture": "std",
            "port": 9229
        }
    ]
}

P.S. just added to Evandro Pomatti's answer

Eden Lu
  • 109
  • 3
0

I had to replace port with attachSimplePort

{
    "name": "Deno",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceFolder}",
    "runtimeExecutable": "deno",
    "runtimeArgs": ["run", "--inspect-brk", "-A", "${fileBasename}"],
    "outputCapture": "std",
    "attachSimplePort": 9229
},
Red Riding Hood
  • 1,932
  • 1
  • 17
  • 36