ClaireL
ClaireL

Reputation: 453

How to debug Deno in VSCode

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?

Upvotes: 30

Views: 11096

Answers (5)

Shervin Ivari
Shervin Ivari

Reputation: 2521

Install the official Deno extension, Then generate a configuration by opening the Run and Debug panel, selecting Create a launch.json file, and choosing the Deno option from the debugger options.

Upvotes: 0

Red Riding Hood
Red Riding Hood

Reputation: 2444

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
},

Upvotes: 0

Evandro Pomatti
Evandro Pomatti

Reputation: 15124

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

Upvotes: 33

ford04
ford04

Reputation: 74550

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

Upvotes: 15

Eden Lu
Eden Lu

Reputation: 119

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

Upvotes: 11

Related Questions