To activate debugging capabilities run Deno with the or --inspect-brk flags.

The --inspect flag allows attaching the debugger at any point in time, while --inspect-brk will wait for the debugger to attach and will pause execution on the first line of code.

Let’s try debugging a program using Chrome Devtools. For this, we’ll use from std, a static file server.

Use the flag to break execution on the first line:

In a Chromium derived browser such as Google Chrome or Microsoft Edge, open chrome://inspect and click Inspect next to target:

It might take a few seconds after opening the DevTools to load all modules.

You might notice that DevTools pauses execution on the first line of _constants.ts instead of file_server.ts. This is expected behavior caused by the way ES modules are evaluated in JavaScript (_constants.ts is left-most, bottom-most dependency of file_server.ts so it is evaluated first).

At this point all source code is available in the DevTools, so let’s open up and add a breakpoint there; go to “Sources” pane and expand the tree:

Looking closely you’ll find duplicate entries for each file; one written regularly and one in italics. The former is compiled source file (so in the case of .ts files it will be emitted JavaScript source), while the latter is a source map for the file.

Next, add a breakpoint in the listenAndServe method:

As soon as we’ve added the breakpoint, DevTools automatically opens up the source map file, which allows us step through the actual source code that includes types.

Now that we have our breakpoints set, we can resume the execution of our script so that we can inspect an incoming request. Hit the “Resume script execution” button to do so. You might even need to hit it twice!

$ curl http://0.0.0.0:4507/

At this point we can introspect the contents of the request and go step-by-step to debug the code.

Deno can be debugged using VSCode. This is best done with help from the official vscode_deno extension. Documentation for this can be found here.

Note: make sure you have installed and enabled in Preferences / Settings | Plugins. For more information, see this blog post.

You can debug Deno using your JetBrains IDE by right-clicking the file you want to debug and selecting the Debug 'Deno: <file name>' option.

This will create a run/debug configuration with no permission flags set. If you want to configure them, open your run/debug configuration and add the required flags to the Command field.

Any client that implements the DevTools protocol should be able to connect to a Deno process.