Debugging Deno.js with NiM Browser Extension

Deno.js is a secure runtime for JavaScript and TypeScript. This guide explores installation, project setup, and debugging with the NiM extension, integrating with Chrome DevTools for an enhanced debugging experience.

Debugging Deno.js with NiM Browser Extension
Photo by Brett Meliti / Unsplash

Introduction

Deno.js, created by Ryan Dahl, is a modern, secure runtime for JavaScript and TypeScript, designed to address the limitations of Node.js. This tutorial explores how to debug Deno.js effectively using the NiM browser extension, enhancing your development workflow.

What is Deno?

Deno is a secure runtime for JavaScript and TypeScript built on the V8 engine, using Rust. It focuses on modern JavaScript features, providing a self-sufficient environment with no external dependencies and explicit permission control for disk and network access.

Deno vs Node.js

Feature Deno Node.js
Language Rust, TypeScript C++, JavaScript
Module System ES Modules CommonJS
Security Sandboxed, explicit permissions User permissions
Package Manager Decentralized, URL-based modules NPM

Getting Started with Deno

Installation

To install Deno, use the following command based on your OS:

Windows:

iwr https://deno.land/x/install/install.ps1 -useb | iex

Homebrew (macOS/Linux):

brew install deno

Alternatively, download binaries from the official Deno repository.

Project Structure

A typical Deno project can include TypeScript files directly without pre-compilation. Modules are imported from URLs, and caching is handled automatically.

Example:

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

Creating a Simple Deno Application

Let's create a simple application to add numbers passed as parameters:

mathService.test.ts:

import { add } from "./mathService.ts";
import { assertEquals } from "https://deno.land/std/testing/asserts.ts";

Deno.test("add function", () => {
  assertEquals(add(1, 2, 3), 6);
});

mathService.ts:

export function add(...numbers: number[]): number {
  return numbers.reduce((a, b) => a + b, 0);
}

index.ts:

import { add } from "./mathService.ts";

const args = Deno.args.map(Number);
const result = add(...args);
console.log(`Result: ${result}`);

Run the test with:

deno test

Debugging with NiM Browser Extension

Introduction to NiM

NiM (Node.js Inspector Manager) is a Chrome extension that facilitates debugging Node.js applications. It can be used to debug Deno applications as well. NiM automatically opens DevTools when a debugging session starts.

Setting Up NiM

  1. Install NiM: Add the NiM extension from the Chrome Web Store.
  2. Using NiM:
    • NiM will automatically detect the debugging session and open Chrome DevTools.
    • Set breakpoints, inspect variables, and step through code using the familiar Chrome DevTools interface.

Configure Deno for Debugging:
Launch Deno with the --inspect flag to enable debugging.

deno run --inspect-brk index.ts 2 3 4

Advanced Deno Features

TypeScript Support

Deno natively supports TypeScript, allowing developers to write, run, and debug TypeScript code without additional tooling.

Top-Level Await

Deno supports top-level await, enabling simpler asynchronous code:

const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);

Conclusion

Deno offers a modern, secure alternative to Node.js, with native TypeScript support and a modular architecture. Using the NiM extension enhances the debugging experience, making it easier to develop and troubleshoot Deno applications. While Deno is still maturing, its innovative features make it worth exploring for JavaScript developers.

Give Deno a try, and see how it can enhance your development workflow!

Further Reading