@schmock/devtools

This package shows the requests your Schmock mocks answer in Chrome DevTools. It creates one collapsed console group and one Performance-panel track entry per mocked request. Its service-worker relay lists mocked requests in the Network panel.

This package is part of Schmock, which mocks APIs from OpenAPI specs or hand-crafted routes.

Install

bun add -d @schmock/devtools

@schmock/core is a peer dependency.

Usage

import { schmock } from "@schmock/core";
import { devtoolsPlugin } from "@schmock/devtools";

const mock = schmock();
mock.pipe(devtoolsPlugin());
mock("GET /api/users", [{ id: 1, name: "Ada" }]);
mock.intercept();

Each request the mock handles through mock.intercept() is reported, whether it was answered, failed or aborted. That includes requests that go through React's SchmockProvider or Vue's schmockPlugin:

• The console shows a collapsed group titled like Schmock GET /api/users → 200 (1.4 ms). This group holds the request and then the response, the error, or Aborted by the client.
• The Performance panel shows an entry on a Schmock custom track. This needs Chrome 128+, a recording, and Show custom tracks turned on under Capture settings.

Requests passed through to the network, mock.handle() calls and Angular's provideSchmockInterceptor are not reported. mock.reset() removes the plugin, so pipe it again after a reset.

Options

devtoolsPlugin({
  console: true,       // log one collapsed group per request (default: true)
  performance: true,   // add one Performance-panel track entry per request (default: true)
  track: "Schmock",    // track name, also the console badge (default: "Schmock")
  trackGroup: "My app" // group the track in the Performance panel (default: none)
});

An invalid option throws a SchmockError with code DEVTOOLS_CONFIG_INVALID.

Network panel relay

The relay displays mocked requests as native rows in Chrome's Network panel. This includes XHR. A service worker answers each request using your page's mock.intercept() leases.

Copy the worker script to the directory your dev server serves at /:

npx schmock-devtools init public

Start the relay before the app renders:

import { startServiceWorkerRelay } from "@schmock/devtools";

mock.intercept();
const relay = await startServiceWorkerRelay();

Mocked rows display (ServiceWorker) in the Size column. The filter is:service-worker-intercepted isolates them. The page must be served over https or from localhost.

• startServiceWorkerRelay({ url, scope, timeout }) defaults to url: "/schmock-sw.js", the browser's scope, and timeout: 5000.
• If the relay cannot start, it resolves with active: false and a fallbackReason. It logs one warning, and mocking stays in the page.
• relay.stop() returns fetch to in-page interception. The worker remains registered.

Read the relay guide for options, fallbacks, framework recipes, and hazards.

Development only

if (import.meta.env.DEV) {
  const { devtoolsPlugin, startServiceWorkerRelay } = await import("@schmock/devtools");
  mock.pipe(devtoolsPlugin());
  await startServiceWorkerRelay(); // only if you use the Network panel relay
}

See docs/devtools.md for the full guide.