How to debug Deno in VSCode

Debugging Deno programs in VSCode can be configured and executed through the following steps:

1. Install Required Plugins

First, ensure that the 'Deno' plugin is installed in your VSCode. This plugin is provided by denoland and can be installed by searching for 'Deno' in the VSCode extension marketplace.

2. Enable Deno

In your project, ensure that Deno support is enabled. You can enable it in one of the following ways:

• Workspace Settings: Open the settings.json file in the .vscode directory and add the following configuration:

  json
  {
    "deno.enable": true
  }

• Through Command Palette: Open the command palette (Ctrl+Shift+P or Cmd+Shift+P), type 'deno: enable', and select it to enable Deno support.

3. Configure Debugger

Next, configure the debugging environment for Deno in VSCode. Create or edit the launch.json file in the .vscode directory and add the following configuration:

json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Deno",
            "type": "pwa-node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "deno",
            "runtimeArgs": [
                "run",
                "--inspect",
                "--allow-all",
                "${workspaceFolder}/app.ts" // Specify your entry file
            ],
            "port": 9229
        }
    ]
}

In this configuration:

• "type": "pwa-node" specifies the use of the Node.js debugging protocol.
• "runtimeExecutable": "deno" specifies using Deno as the runtime environment.
• "runtimeArgs" includes the necessary arguments for running the Deno program, such as --inspect to enable debugging and --allow-all to grant all permissions (adjust permissions as needed based on your specific requirements).

4. Start Debugging

After configuration, open the 'Run and Debug' sidebar in VSCode, select the newly created 'Deno' configuration, and click the green start debugging button (or press F5). VSCode will then launch the Deno program and wait for the debugger to connect on the specified port.

5. Set Breakpoints

Set breakpoints in your code; when execution reaches a breakpoint, VSCode will pause automatically, allowing you to inspect variable values, call stacks, and other information to understand and debug the execution flow.

Example

Consider the following simple Deno program app.ts:

typescript
console.log("Starting program");

function calculate(x: number, y: number): number {
    return x + y;
}

console.log("Result:", calculate(5, 3));

Set a breakpoint before the calculate function call; when execution triggers the breakpoint, you can inspect the values of the input parameters x and y.

Conclusion

By following these steps, you can conveniently set up, run, and debug Deno programs in VSCode, leveraging the powerful debugging tools of VSCode to improve development efficiency and code quality.