Embedded DevTools Mock Panel

A zero-dependency, embeddable network request interception and mock panel. It records fetch and XMLHttpRequest requests from the current page, displays request and response details, and supports editing mock rules and replaying multi-step responses at runtime.

Features

• Intercepts fetch and XMLHttpRequest, recording up to 200 requests.
• Supports URL and status-code search, plus newest/oldest sorting.
• Displays request headers, request body, response headers, and response body; JSON is automatically formatted and highlighted.
• Lets you edit mock enabled state, name, method, matching pattern, status, delay, headers, and body in real time.
• Supports multiple mock configurations for the same endpoint, with only one active at a time; includes grouping, bulk deletion, and creating mocks from requests.
• Supports substring matching, simple regular expressions, and the ALL method.
• Creates Snapshot scenarios from request history, with multi-step responses and repeat-last or loop playback.
• Supports JSON import and export for mocks and Snapshots.
• Persists configuration in IndexedDB, falls back to localStorage when IndexedDB is unavailable, and migrates legacy data automatically.
• Uses a Service Worker in secure http(s) contexts so mocked requests can also appear in the browser's native Network panel.
• Automatically restores Mock/Snapshot rules after a Service Worker restart, when the page regains focus, or when it becomes visible again.
• Settings supports Split View / Modal Dialog layouts, storage estimates, and data reset.

Quick Start

Open index.html directly to try the demo. In this mode, the tool uses in-page JavaScript interception, so requests will not appear in the browser's native Network panel.

For Service Worker and native Network panel support, serve the files through a local HTTP server:

python3 -m http.server 5173 --bind 127.0.0.1

Then open http://localhost:5173/.

Integration

Copy devtools-panel.js, mocktools-sw.js, and styles.css into your project's static asset directory, then initialize the panel:

<link rel="stylesheet" href="/devtools/styles.css" />
<script src="/devtools/devtools-panel.js"></script>
<script>
  window.MockTools.init({
    buttonPosition: "bottom-left",
    seedMocks: [
      {
        enabled: true,
        method: "GET",
        pattern: "/api/users",
        status: 200,
        delay: 200,
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ users: [] }, null, 2)
      }
    ]
  });
</script>

The panel should generally only be loaded in development. For React/Vite applications, place the files in public/, dynamically load devtools-panel.js from the entry file, and call MockTools.init().

Initialization Options

window.MockTools.init({
  // Defaults to true; enabled only in supported http(s) secure contexts
  useServiceWorker: true,

  // Floating button position: "bottom-left", "bottom-right", or a position object
  buttonPosition: "bottom-left",

  // Mock list used on first initialization
  seedMocks: []
});

Existing persisted configuration takes precedence over seedMocks. To use the seed configuration again, click Reset in Settings or clear the site's stored data.

Mock Matching and Responses

{
  enabled: true,
  name: "Users success",
  method: "GET",              // GET / POST / ... / ALL
  pattern: "/api/users",      // URL substring matching
  status: 200,
  delay: 200,
  headers: { "content-type": "application/json" },
  body: JSON.stringify({ users: [] }, null, 2),
  group: "Users"
}

pattern rules:

• A normal string matches a URL substring, for example "/api/users".
• A pattern wrapped in / is treated as a regular expression, for example "/\\/api\\/users\\/\\d+/".
• Invalid regular expressions fall back to substring matching.
• When multiple enabled rules match, the longest pattern is used; rules with equal-length patterns keep list order.

Snapshot Playback

Snapshots simulate responses that change across calls to the same endpoint, such as “pending → completed”. They can be created from completed requests in the request history or configured manually with rules and response steps.

{
  name: "Create order flow",
  rules: [
    {
      method: "POST",
      pattern: "/api/orders",
      overflow: "repeat-last", // or "loop"
      responses: [
        { status: 202, delay: 100, headers: {}, body: "{\"state\":\"pending\"}" },
        { status: 200, delay: 100, headers: {}, body: "{\"state\":\"done\"}" }
      ]
    }
  ]
}

When a Snapshot is enabled, it takes precedence over normal Mock rules. When disabled, normal Mocks continue to apply. Responses generated by MockTools include the following marker headers so applications and debugging code can identify them:

• x-mocktools-mocked: 1
• x-mocktools-snapshotted: 1 (Snapshot response)
• x-mocktools-mock-id: <id>
• x-mocktools-snapshot-step: <zero-based step index> (Snapshot response step)

JavaScript API

window.MockTools.addMock(mock);   // Add and persist a Mock
window.MockTools.clearRequests();  // Clear request history in the panel
window.MockTools.getRequests();    // Return a copy of request records
window.MockTools.getMocks();       // Return a copy of Mock configurations

Persistence and Backups

By default, the tool uses IndexedDB:

• Database: embedded-devtools
• Object Store: settings
• Mock record: mocks
• Snapshot record: snapshots
• Active Snapshot: active_snapshot_id

If IndexedDB is unavailable, the tool uses localStorage. The Mock and Snapshot toolbars each provide Import/Export actions for backing up configuration before clearing site data or debugging across environments. Reset in Settings deletes Mocks, Snapshots, and request history while preserving whitelist entries.

Service Worker and Limitations

The Service Worker is enabled only on http:// or https:// pages where the browser allows Service Workers. It registers mocktools-sw.js from the same directory, intercepts matching requests, and returns Mock responses so they can be observed in the native Network panel.

In file:// environments or when the Service Worker is unavailable, the tool still intercepts and records requests in the current page, but mocked requests do not enter the browser's native network stack. Cross-origin requests, CSP, browser extension policies, and another Service Worker owned by the site may also affect interception.

Project Files

• devtools-panel.js: Panel UI, request interception, Mock/Snapshot management, and public API.
• mocktools-sw.js: Service Worker interception and persisted rule recovery.
• styles.css: Demo page styles.
• index.html: Runnable demo page.

The project has no third-party runtime dependencies and can be used as an SDK prototype or copied into an existing frontend project.