Building a browser extension for software testers
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 also requires you to have as much information as you can. Without that, it’s like looking for a needle in a haystack. There are tools and libraries which aim to provide that data, but I still think there’s a part that could be improved. I noticed there’s usually much back and forth between software testers and developers regarding the tested scenario and what happened during the test. That’s why I decided to create a browser extension called Monito.
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
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.
What’s next?
I personally think there’s a bunch of features/improvements I feel could be helpful:
- Generating Cypress/Puppeteer/Playwright test cases automatically
- Improving UI to display HTTP and WebSocket requests/responses in a more detailed, easier understand way
- Creating a web-based log reader, so developers who are given the logs generated by Monito don’t have to read text files directly
- Add some search option
- Add more filters so users can disable, for example, a specific type of network traffic
- Figure out the best format of extracted logs to make them as readable as possible
- Add direct links to MDN docs for things like HTTP Statuses to make it easier to learn and grow
What’s most important, I’d love to get your feedback. If you’re a software tester or a developer, let me know if anything could be simplified in your testing workflow. Write me an email or DM me on Twitter. I use it in my daily work as a web developer. I find it more convenient to use than Dev Tools for most scenarios because you can see everything on a single page.
Before working on new features, I plan to do the following:
- Improve landing page to provide more information why someone would need this
- Add a help section to the landing page to make it easier for users to install/use the extension
- Reach out to more potential users and validate the idea more
- ProductHunt launch
- HackerNews post
- IndieHackers post
To get more information visit Monito website. You can install it from the Chrome Web Store. Monito has a 7-day free trial and requires license activation after that. It’s a one time purchase and it costs $29 USD.