Here at Ooyala, we’ve developed a highly configurable and extensible media player. It’s an intricate system, and intricate systems can be intricate to debug at times. Every player can have a myriad of modules and settings configured, and a customer can set up as many players as they like. As you can imagine, this can lead to issues only reproducing in very specific conditions. So during a hackathon at Ooyala, a team put together a shiny new debugging tool. What they made is a Google Chrome extension that takes a lot of the complexity out of what’s needed for basic debugging and allows us to tune what it provides to make our triage of the problem faster and more efficient.
Outside of the extension we set up a debugging page with a test player set up to talk to our extension. Gluing it all together we get our player’s logs directed to our new dev tools panel, along with a few other neat features. Now all anyone has to do is install the extension and hit the test page, and they’re ready to debug like a pro.
All that might sound like a lot of work, so what value does it bring? Succinctly, with this tool we get all the data we need for easier debugging.
When investigating issues we request two things as a rule: a HAR file and the logs from the player itself. HAR stands for HTTP Archive and the HAR file acts as a snapshot of all the network traffic going through the browser on our page. This lets us inspect the customer's network traffic as if we're right there when they reproduce the issue. The player logs let us see what's happening in our code and catch a lot of common problems without having to even load the debug page. With this new dev tool, the user sees two big buttons, one for saving the HAR file and one for saving the player logs. So now a user can save a HAR file or logs dirt simply: they just need to hit the button and send us what it saves. By providing these two files easily and quickly, it sets expectations on what helps us to debug and diagnose. And since it’s a Chrome extension, we know exactly what environment they’re reproducing from which in turn helps us isolate the issue faster.
Our debug page also works on other browsers, should it be an issue specific to something other than Chrome. Obviously we lose our nifty Chrome debug console, but the debug page is still quite useful. And in such situations the user can generate a URL with all of their configuration options to send to us, allowing us to use the same configuration the user had.
To conclude, we’ve built a small ecosystem of tools where the whole is more than the sum of its parts. They all work together to make triaging issues less onerous for everybody involved. These are the kinds of investment that make Ooyala an even more responsive company, and we’re always on the lookout for more along these lines.