devtool

@spoosh/devtool

Visual debugging panel for Spoosh. See every request, plugin step, and cached state in your browser's DevTools.

Installation

1. Install the Chrome Extension

Install the Spoosh DevTools extension from the Chrome Web Store.

2. Install the npm package

npm install @spoosh/devtool

Usage

import { Spoosh } from "@spoosh/core";
import { devtool } from "@spoosh/devtool";

const client = new Spoosh("/api").use([
  devtool(),
  // other plugins...
]);

Open Chrome DevTools and navigate to the "Spoosh" panel to see your requests.

Features

Feature	Description
Request Timeline	See every request with timing, status, and duration
Plugin Steps	Watch middleware execution order with before/after diffs
State Inspector	Browse cache entries, subscriber counts, refetch or delete
Event Log	View invalidations, refetch triggers, custom plugin events
Status Badges	Pending, success, error, stale, fresh indicators
Filter & Search	Filter by operation type, search by path or query key
Theme Switching	Follows Chrome DevTools theme
Sensitive Headers	Toggle to reveal/hide auth headers with eye icon
Export	Save traces as JSON for analysis
Settings	Max history size, auto-follow, show/hide passed plugins

Options

devtool({
  enabled: true,
  sensitiveHeaders: ["authorization", "cookie", "x-api-key"],
  maxHistory: 50,
  maxMessages: 100,
});

Option	Type	Default	Description
enabled	boolean	true	Enable or disable the devtool
sensitiveHeaders	string[]	["authorization", "cookie", "x-api-key", ...]	Headers to redact in UI and exports
maxHistory	number	50	Maximum number of traces to keep in memory
maxMessages	number	100	Maximum messages per SSE subscription

Production

The plugin does nothing when:

• enabled: false
• Running on server (SSR)

devtool({ enabled: process.env.NODE_ENV === "development" });

Documentation

See full documentation for detailed usage.