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

Use --save-exact when you install chrome extension from the repository

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

Repository build

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

⚠️ WARNING If you chose to install the extension from the repository, you will need install @msw-devtools/connect with --save-exact flag to avoid version mismatch.

Chrome Web Store

⚠️ WARNING Chrome Web Store version can be outdated because of the review process.

If you want to install from the Chrome Web Store, you need to check the latest version in the repository and compare it with the Chrome Web Store version.

We recommend using the latest build from the repository.

Upload JSON Config to extension

@msw-devtools/json-config

See the demo

At this page we have installed msw and initialized with the createResponseResolver function from @msw-devtools/connect.

msw-devtools.com

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.