Effect Dev Tools

View traces, metrics, and inspect the context for your Effect app - all without leaving VS Code!

Setup

To use Effect Dev Tools in your Effect project, first, you need to install the following dependency:

pnpm install @effect/experimental

You can then import and use the DevTools module in your Effect app:

import { DevTools } from "@effect/experimental"
import { NodeRuntime, NodeSocket } from "@effect/platform-node"
import { Effect, Layer } from "effect"

const program = Effect.log("Hello!").pipe(
  Effect.delay(2000),
  Effect.withSpan("Hi", { attributes: { foo: "bar" } }),
  Effect.forever,
)
const DevToolsLive = DevTools.layer()

program.pipe(Effect.provide(DevToolsLive), NodeRuntime.runMain)

The code above expects the DevTools server to be available at localhost:34437. If you are not running the DevTools client (e.g., backend) on the same machine, or if it's not available at localhost, you'll have to manually specify the websocket server URL like so:

const DevToolsLive = DevTools.layer('ws://localhost:34437')

If you are using @effect/opentelemetry in your project, then it is important that you provide the DevTools layer before your tracing layers, so the tracer is patched correctly.

Beware that the Effect DevTools extension does not behave like a typical debugger UI, which connects to the debugger port of the target process. It's the other way around here. One of the reasons for that is to enable tracing of web applications, which are not able to expose ports, as servers do.

Docker

In case you're using Docker for local development and want to connect from your containerized application to the DevTools server in VS Code, you'll have to do 2 things.

1. You'll have to make your host machine addressable from within the container by adding an extra host.

services:
  effect-backend:
    extra_hosts:
      - host.docker.internal:host-gateway

2. You'll have to specify the connection URL in your application to be

DevTools.layer('ws://host.docker.internal:34437');

Usage

Once you have added the Layer to your project, open the Effect Dev Tools panel in VS Code & click "Start the server" in the "Clients" panel.

You can then start your Effect app, and then begin to inspect the results!