Let’s imagine you are given a task to fix a web bug that is filed by someone. You will have to understand what is the bug, find the endpoint, go through the reproduction steps and understand exactly what request caused the issue and then try to fix it. What if there is a tool which gives you not only screen recording but also the network recording. The tool can show both: the request/response and the video, and also the sync it. You can search to find a specific text contained in the request/response. The tool will allow you to export to an MKV file which can be played using any media player, but shows the network as soon as it’s accessed from the tool. Well, it’s now possible because of ReproNow.

ReproNow is a browser extension that is built for engineers to triage quicker and better. This tool captures your screen and the underlying network data and presents it as a video. It also provides a Previewer which provides a clean view for the engineer to view the screen capture and the corresponding network requests. It also displays the headers and body of the Request selected and presents the Response headers. Everything happens on the client side and nothing is sent to the server. To top this off, it is Open Source!

The tool consists of 3 main parts

Screen Capture — Achieved by using chrome.desktopCapture (which uses getUserMedia API) Network Capture — Achieved using chrome.webRequest API Export Screen + Network as MKV — Achieved by storing the network in attachment section of MKV using ffmpeg.js/ts-ebml on client.

One of the challenges while building ReproNow was merging video and network into a single file. The objective was to make it easier to share the video with an engineer and also view it on ReproNow’s Previewer without much hassle. Finding a way to do all of this on the client side increased the complexity of this.

After evaluating some common video formats like MPEG4, Flash, and MKV, MKV stood out as it had an attachment section where the JSON (network data) could be attached and dumped. WebM being derived from MKV and built specifically to work on the browser also influenced the decision to use MKV for ReproNow.

The next part of the challenge was finding a framework that manipulates MKV to attach JSON on the client side. Ffmpeg.js came to the rescue and has been implemented to attach the network data (JSON) into the video file. The only caveat with ffmpeg.js is it is a little slower and to solve that ts-ebml, a Node.js library is used as a preferred method by ReproNow. It falls back on ffmpeg.js in case ts-ebml fails. Either way, ReproNow provides a reliable way to download videos attached with network data. So, now you can view the video in any third party player and still view the screen and upload the same file to our previewer and watch the network requests go by.

Tool Features

Capture screen and network data

Option to copy any request as Curl or Raw

Video on local storage

Previewer with a clean UI to have all information on one screen

Network data is hidden inside the MKV file

History on the extension shows the previous videos

Host Previewer locally or just go to https://www.repro-now.com/previewer

Lots of options to customize what you want to capture

Everything runs on Client Side

Open Source — Customize and change as you like

The tool can be used for internal or external QA. It can also be used by bug bounty researchers and engineers to report and reproduce security bugs.

Demo

Go to Repro-Now.com/previewer and load the demo video

Chrome Extension and Code

Download extension from chrome store or check out the code on Github