TLDR: Monito is a browser extension for software testers and developers. It shows you what is going on in your web application, allows you to record your screen, make screenshots and extract all the data, recordings and information in a single archive.
Story
Writing software is hard. Debugging issues and fixing bugs can be even more challenging. It requires you to dive into the code and check all the possible paths and scenarios related to the problem. It's easier to figure out what's wrong when you have all the information about the problematic scenario. What happened when someone clicked on that button? Did API respond correctly? What data was sent from the frontend, how did server respond? Did user input data correctly? Providing that kind of information is not trivial and requires a lot of time and effort.
What information do developers need to find and fix a bug?
To have an idea where the problem might be, we first need to figure out what part of the system is failing. Is it client-side or server-side? Maybe it’s caused by a platform bug? Perhaps the network has failed? When I stepped back and thought about the information I use in my work as a web developer, it would be the following:
- Network requests - to be able to see if the problem is related to the backend not responding correctly or checking if there’s bad data sent from the frontend
- Console logs - to get additional context if there are any
- User interactions - to be able to reproduce the scenario step by step
- Navigation events - to be able to see how the user navigated through the page
- Screen recording - to be able to see what exactly happened from a UI perspective
- Screenshots - more lightweight than recording, more straightforward to check Getting all these things is not an easy task for a software tester. It usually requires using multiple tools like built-in browser DevTools, screen recording software, some screenshot-taking app. I spent some time thinking about the possible solution/improvements and created what I think might make this process easier.
Monito, a browser extension for software testers and developers
Monito works in all Chromium-based browsers, ie. Edge, Brave, Opera, and Chrome. It records network requests (HTTP and WebSockets), console logs, user events (clicks, etc.), and navigation events. All the registered data can be extracted as a single archive of JSON files. It can also record a screen (a chrome tab, window, or entire screen) and save it as a WebM video file. Also, anytime it can grab a screenshot of the currently monitored tab.
How can I try it?
You can install it from the Chrome Web Store. Monito has a 7-day free trial and requires license activation after that. You can buy it here.