Project status?

[nipuna-g]

Hi @riccardoperra, this project looks like it could be super useful for debugging and generally using msw.

I wanted to build something similar and came across your repo while doing my research.
I was wondering if you have any plans to continue building this project? Or if there was any particular reason why work on this was stopped.

[riccardoperra]

Hi @nipuna-g, currently the main reason I stopped to work on this is my lack of time. I hope to be able to get back to work on it :/

There was some problem related to the communication between browser and devtool, the differences of the msw versions etc.
Furthermore it was difficult to get the handlers defined in the code especially on projects which use angular etc, or so it seemed to me at the time.

What I wanted with this extension was something that would allow me to manage them without having to use ad hoc functions or vite/esbuild transformers but I'm afraid it's not feasible to do, at least without applying an effort that I can't have at the moment

I definitely have to see:

• ui kit (which is mostly ready https://github.com/riccardoperra/codeui)
• library to handle tab<->extension events easily: i was using something custom from https://github.com/thetarnav/solid-devtools, but it's currently an headache for me
• handler function serialization
• network listener to see the status of requests
• some way to build msw handlers compatible with the extension to add specific behaviors
• sync state when open/close tab or reload the app dev tool

[nipuna-g]

Thank you for the detailed response!

the main reason I stopped to work on this is my lack of time. I hope to be able to get back to work on it :/

This is completely understandable, this work so far looks really impressive and I can hopefully build on this or use this as a base.

What I wanted with this extension was something that would allow me to manage them without having to use ad hoc functions or vite/esbuild transformers but I'm afraid it's not feasible to do, at least without applying an effort that I can't have at the moment

This would be the dream! I can't think of a way to get this done without getting the msw team to expose some hooks for the extension.

But I think your approach of having to call a method for dev mode is pretty smart and not too much work for getting some nice devtools.

I've played around with the project although I could not get it fully up and running. But I will keep looking into it when I get some time to see if I can help with any of the next steps.
Thanks again for the reply.

[riccardoperra]

To run everything in development you should build all packages in dev mode and run the "sandbox" package:

• install all deps with pnpm i
• run the command pnpm build from root folder (needed the first time only if I remember)
• run the command pnpm dev and open the browser at http://localhost:5173/ . It will take a bit to load everything.

Currently I don't recommend to build the extension and try it directly by the inspector tool since there are annoying steps to do for every minimal change in the code, however you have to remember that everything will work by events communicating with the window, so not everything is allowed.

Everything related to the html page <-> extension is here bridge.ts, and this file is not loaded at the moment with the dev command.

In order to try the extension in the browser, run pnpm build. Then load the content of packages/extension/dist in Chrome -> Extension tab -> Load non authorized extension