Mock Service Worker DevTools Extension

⚠️ WARNING: Pre-release Version
In this pre-release version, every update clears the configuration storage!
Be cautious and make sure to save your JSON configurations locally to avoid losing them. 💾

Overview

This Chrome extension simplifies working with Mock Service Worker (MSW). Instead of manually writing handlers, you can upload JSON files with mock requests, manage multiple configurations, and switch between them seamlessly. 🛠️

Key Features 🌟

📂 JSON Import

Easily upload JSON files containing mock request configurations.

🔄 Multi-JSON Support

Switch seamlessly between multiple JSON configurations within the same host environment.

🚀 Pass-Through Mode

Enable pass-through mode to bypass JSON config and send requests directly to the server even if configurations are uploaded.

Motivation 💡

This extension is a game-changer for both developers and QA testers working with MSW. 🧑‍💻👩‍💻
Instead of manually defining handlers for every request, you can now upload pre-configured JSON files, whether it's a single file or multiple files for different scenarios. Switching between configurations is quick and easy, making this tool highly efficient for various development and testing workflows. 🚀

Get started 🚀

Installation

npm install @msw-devtools/connect --save-exact

Integrate to existing MSW setup

We assume that you are already familiar with Mock Service Worker (MSW) and have set up your project to work with it. If not, please visit the official MSW website for guidance.

Just add the response resolver handler from @msw-devtools/connect

import { http } from 'msw'
import { setupWorker } from 'msw/browser'

import { createResponseResolver } from '@msw-devtools/connect'

const handlers = [http.all('*', createResponseResolver())]

setupWorker(...handlers).start({
  onUnhandledRequest: 'bypass'
})

Install Chrome Extension

Chrome Extension is not yet published to Chrome Web Store, because it's in waiting for review.

You can only install it downloading the build and loading it as an unpacked extension.

Upload JSON Config to extension

@msw-devtools/json-config

See the demo

@msw-devtools/demo

Roadmap Features 🚧

• Edit json config in the DevTools: Currently, you can only upload JSON files, but you can't edit them in the DevTools.
• Upload multiple JSON configs: Currently, you can only upload one JSON file at a time, because it simplifies the process of validation.
• Multi window support: Currently, you can use multi tabs with different configurations per host, but only one browser window is supported.
• Early request interception: Currently, requests sent before the extension is initialized are not intercepted by JSON handlers.