If you’ve ever worked with MobX in a complex project, you know how hard it gets debugging it and understanding what is going on even when using popular Devtools. That’s where MobX-Visualizer comes in, a tool I made for my own needs a while ago. It helped me a lot to see everything clear, like a picture, and I hope it helps you too.
What It Does?
Mobx-Visualizer is for debugging MobX. It watches what MobX does -like actions or changes in stores- and makes it easy to see. It uses Mermaid.js to draw “sequence diagrams.” These diagrams show you what happens step-by-step in your app.
For example, imagine you have a todo app with few stores: one for todos, one for user, one for settings. You click something, and boom, app slows down or rerenders too much. With mobx-visualizer, you get a picture showing which store did what and when. It makes an SVG file you can download. If you turn on debug mode, it even puts a button in your app to download it at any point of the lifecycle of your app.
Here’s what it can do:
- Catch MobX actions and changes.
- Draw them as a diagram.
- Show debug info in console (if debug option is true).
- Let you exclude some stores or actions you don’t care about.
- Help you find slow parts or extra rerenders.
Why I Made It and How It Helped Me??
A little more than one year ago, I worked on a complex React app with MobX. It had many stores, and things got a little hard to debug.
I needed to see what MobX was doing. Event though it’s super powerful, but you don’t always know what’s happening inside. So, I made a script which turned later into MobX-visualizer to show me. First, it was simple -just watching events and making diagram text. But then I added more: SVG files, a button, ways to filter stuff. For more than a year, it helped me a lot in all my apps. It made debugging faster, fixed slow parts, and stopped rerenders I didn’t need.
Now It’s for Everyone
I used MobX-Visualizer for myself for long time, and it made my work better. Now, I give it to the internet. It belongs to everyone! I hope it helps you like it helped me. If you have MobX in your project and it’s hard to understand, try this. You can see what’s happening, fix bugs easy, and make your app run smooth.
Want to try it? Just install it with npm install mobx-visualizer, add it to your app or to the example project, and turn on debug mode. Click the button, get your diagram, and see the magic!
Thanks for reading. I’m happy to share this with you. Let me know if you like it or if you have any idea for how to make it even better, I’d always love to hear!