https://github.com/riccardoperra/mswjs-devtools-extension

[WIP] [NOT PUBLISHED YET] Chrome extension for debugging and configuring Mock Service Worker at runtime in your application.
https://github.com/riccardoperra/mswjs-devtools-extension

apimocking chrome chrome-extension mock mock-server mocking msw mswjs solid-js

Last synced: 2 months ago
JSON representation

[WIP] [NOT PUBLISHED YET] Chrome extension for debugging and configuring Mock Service Worker at runtime in your application.

• Host: GitHub
• URL: https://github.com/riccardoperra/mswjs-devtools-extension
• Owner: riccardoperra
• Created: 2022-10-22T06:33:07.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-01T16:57:30.000Z (over 1 year ago)
• Last Synced: 2024-10-18T06:30:16.055Z (3 months ago)
• Topics: apimocking, chrome, chrome-extension, mock, mock-server, mocking, msw, mswjs, solid-js
• Language: TypeScript
• Homepage:
• Size: 2.4 MB
• Stars: 20
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        





  



Mock Service Worker Developer Tools Extension

MSW DevTool is a Chrome Developer Tools extension for debugging and configuring Mock Service Worker in your application.







    



## 🚧 This project is currently in early development 🚧

## Features

✅ **Integrate existing handlers from your application code**.

Once the extension is configured, you will be able to retrieve automatically the list of your configured handlers

in order to activate/deactivate them, editing the responses at runtime and more.

![img_6.png](img_6.png)

✅ **Create and edit existing handlers on the fly**.

You can edit your handler response at runtime, with the possibility to add more custom responses to choose the one that

suits better your scenario.

![img_8.png](img_8.png)

✅ **JSON Editor and @faker-js/faker-js integration**.

You can add a custom response body in JSON taking advantage of different custom

features like `Prettier` auto-formatting, autocompleting for `@faker-js/faker-js` variables.

![img_5.png](img_5.png)

## Usage

```ts

import {setupWorker, SetupWorkerApi} from "msw";

import {handlers} from "./handlers";

export const worker = setupWorker(...handlers);

declare global {

  interface Window {

    __MSWJS_DEVTOOLS_EXTENSION: {

      configure: (msw: SetupWorkerApi) => void;

    };

  }

}

if (window.__MSWJS_DEVTOOLS_EXTENSION) {

  window.__MSWJS_DEVTOOLS_EXTENSION.configure(worker);

}

```

## Roadmap

- [ ] Add handler CRUD

- [ ] Add scenarios

- [ ] Add Import/Export configuration

- [ ] Add configuration persistence

- [ ] Add request conditions from UI

- [ ] Import interfaces from open-api

- [ ] Handle mock environments

- [ ] Add docs

- [ ] Remove tailwind