Engineering Blog

Chrome Debugging Extension for the Ooyala Player

by Community Manager on ‎02-08-2017 10:26 AM (1,773 Views)

Written by Dustin Preuss April 8th, 2014

Software Development



The Trouble


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.



The Tech




If you’re unfamiliar with Chrome extensions, they generally consist of two components. First is what's called a content script which gets injected into pages we specify. This is plain Javascript with some hooks into APIs provided by Chrome and can also interact with content in the web page. Second is the script and background page that run inside Chrome with access to all of the browser's APIs and functionality (and optionally sticks an icon in your navigation bar). This is where the advantage of extensions comes from because it gives you much more power and freedom than plain Javascript can. For our extension we also utilized a dev tools panel in order to add a new tab to Chrome’s developer console. This gives a big area to work with in order to display logs and add features, rather than be limited to a dropdown from our icon.


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.



The Takeaway


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.