Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to debug Deno in VSCode

Tags:

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?

like image 428
ClaireL Avatar asked May 17 '20 14:05

ClaireL


People also ask

How do I debug using VS Code?

To bring up the Run and Debug view, select the Run and Debug icon in the Activity Bar on the side of VS Code. You can also use the keyboard shortcut Ctrl+Shift+D. The Run and Debug view displays all information related to running and debugging and has a top bar with debugging commands and configuration settings.

How do I enable debugging in Visual Studio?

In the Visual Studio toolbar, make sure the configuration is set to Debug. To start debugging, select the profile name in the toolbar, such as <project profile name>, IIS Express, or <IIS profile name> in the toolbar, select Start Debugging from the Debug menu, or press F5.


2 Answers

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

like image 130
Evandro Pomatti Avatar answered Oct 03 '22 05:10

Evandro Pomatti


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:

  • Where is stdout for VS Code?
  • Debug output doesn't appear in debug console without "outputCapture": "std" #41600

Related

  • https://code.visualstudio.com/docs/editor/debugging
  • https://code.visualstudio.com/docs/nodejs/nodejs-debugging
like image 31
ford04 Avatar answered Oct 03 '22 06:10

ford04