In this article, we will go through the entire process of set up Visual Studio Code for debugging “Deno” programs using “V8 Inspector Protocol”. Step-by-step, we will be learning how to configure VSCode to debug a Deno project.
If you don’t know Deno, here is a small description:
What is Deno?
“Deno, the open-source runtime for TypeScript and JavaScript. Features built-in dev tools, powerful platform APIs, and native support for TypeScript and JSX.” - Visit the Official web site to get more information.
Creating a Deno project
Assuming that you already have installed Deno 2.0 or higher. If is not, you can follow the getting started docs
Once you have installed Deno, run the following “deno cli” command:
deno init my_deno_project
You will get a new directory with the following structure:
my_deno_project
├── deno.json
├── main_test.ts
└── main.ts
Run the program to check if everything is working fine:
deno main.ts
#output: Add 2 + 3 = 5
Now we are ready to set the debugging settings.
Debugging flags
Deno supports the V8 Inspector Protocol used by Chrome, Edge and Node.js. This makes it possible to debug Deno programs using Chrome DevTools or other clients that support the protocol (for example VSCode).
Deno supports the following flags:
--inspect: Use this flag to start your program with an inspector server which allows client connections from tools that support the V8 Inspector Protocol, for example Chrome DevTools.
--inspect-wait: Use this flag to wait for a debugger to connect before executing your code.
--inspect-brk: Use this flag to wait for a debugger to connect before executing your code and then put a breakpoint in your program as soon as you connect, allowing you to add additional breakpoints or evaluate expressions before resuming execution (VSCode IDE use this flag by default)
For this article we will use ”--inspect-brk” flag to activate debugging capabilities to debug Deno Projects.
Debugging Setup File
We are going to create a launch configuration file to configure and save debugging setup details. Let’s create a file called launch.json in .vscode folder (if this folder does not exist, you have to create it manually):
{
"version": "0.2.0",
"configurations": [
{
"request": "launch",
"name": "Debug Deno Program",
"type": "node",
"program": "${fileBasename}",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": [
"run",
"--unstable",
"--inspect-brk",
"--allow-all"
],
"attachSimplePort": 9229
}
]
}
Let’s explain launch configuration attributes:
request: The request type of this launch configuration. “Launch“ and “attach” are supported. We set “launch” as part of our debugging setup.
name: The reader-friendly name to appear in the Debug launch configuration dropdown. We set “Debug Deno Program”
type: The type of debugger to use for this launch configuration. Every installed debug extension introduces a type: node for the built-in Node debugger, for example, or php and go for the PHP and Go extensions.
program: Executable or file to run when launching the debugger. We set “${fileBasename}” which means “The current opened file's basename with no file extension”.
cwd: Current working directory for finding dependencies and other files. We set "${workspaceFolder}" which means “The path of the folder opened in VSCode”.
runtimeExecutable: Runtime to use. Either an absolute path or the name of a runtime available on the PATH. We set “deno”.
runtimeArgs: Optional arguments passed to the runtime executable. We set:
run: The deno run command is used to execute JavaScript or TypeScript programs in Deno. By default, Deno runs programs in a sandboxed environment without access to the disk, network, or the ability to spawn subprocesses.
--unstable: This Deno flag is used to enable features that are not yet stable. These features are still under development and may change in future releases.
--inspect-brk: This Deno flag is used to start the Deno process in debugging mode and pause execution on the first line of the script. This allows you to connect a debugger (like Chrome DevTools) to the Deno process and inspect the code before it starts executing.
--allow-all: This Deno flag is used to grant all permissions to a script. When you run a Deno program with this flag, it bypasses the security model and allows the script to access the network, file system, environment variables, and more without any restrictions.
attachSimplePort: Attaches to the Deno process via the given port. This is generally no longer necessary for Node.js programs and loses the ability to debug child processes, but can be useful in more esoteric scenarios such as with Deno and Docker launches. We set “9229“ which is the default debugging port for Deno when using the --inspect or --inspect-brk. This means that when you run a Deno script with these flags, the inspector will be activated on 127.0.0.1:9229.
Debugging
We are ready to debug a Deno program. Go to VSCode and open main.ts file. After that, follow the steps that the following picture shows:
First, open “Run & Debug” panel (typically located in the left side of the VSCode window)
Second, add a breakpoint into line 2 of main.ts file.
Third, Run the debugger.
Once debugger started, you will be able to see the variables, the debug tools and the executed Deno command in the debug console.
Benefits of debug your programs using visual studio code
Debugging your programs using Visual Studio Code can help us save time, improve the quality of our code, and improve our productivity. Other benefits are:
Interactive debugging: VSCode allows you to set breakpoints, step through your code line by line, inspect variables, and watch expressions in real-time. This interactive debugging feature makes it easier to identify and fix issues in your code.
Visual representation: VSCode provides a visual representation of your code’s execution flow, making it easier to understand how different parts of your program interact with each other.
Customizable settings: VSCode allows you to customize your debugging settings, such as setting up custom breakpoints, configuring watch expressions, and enabling specific debugging tools to suit your needs.
Integrated terminal: VSCode has an integrated terminal that allows you to run commands or debug your program directly within the editor.
Now that you’ve read this article, you know exactly how to debug Deno program with Visual Studio Code.
Subscribe to my newsletter and don't miss new articles. See you then.
