Building a Devtools Chrome Extension to monitor traffic from PubNub

Why a custom PubNub Chrome Extension?

When I started developing Mote.io, all the PubNub publish and subscribe calls got noisy and confusing. To solve this, I created a custom function to manually title and log all PubNub traffic to the Chrome console inside Dev Tools.

You might ask: “doesn’t all traffic show up in the network tab?” It’s true, but we’re really talking about all traffic here, in one giant list. It’s unorderly and difficult to decipher. Plus, we only really care about a small portion of this network traffic; the JSON messages received.

You might be familiar with the ability to debug a single WebSocket in the Network tab. Wouldn’t it be great if the same was true for PubNub?

Because I carry the burden of creating all the most awesome stuff for PubNub, I decided to take matters into my own hands. I built a Chrome extension that does just this. It takes PubNub traffic and displays it in a fashion similar to WebSockets.

You can read more about this extension here. We just released a second version that adds message filtering and traffic graphs.

Google Chrome Devtools Extension APIs

Many developers are familiar with Chrome Extensions, but many are surprised to find that you can also create extensions for Chrome Developer Tools.

A DevTools extension adds functionality to the Chrome DevTools. It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more. DevTools extensions have access to an additional set of DevTools-specific extension APIs:

Extending DevTools – Google Chrome

All we’re interested in is monitoring the PubNub traffic and formatting it in a way that makes sense. Lucky for us, Chrome Devtools exposes a network api that lets us catch all incoming traffic. Perfect.

Use the chrome.devtools.network API to retrieve the information about network requests displayed by the Developer Tools in the Network panel.

chrome.devtools.network – Google Chrome

But where do we log the traffic? Devtools extensions allow us to create a new panel just for our extension. Again, just what we needed.

Use the chrome.devtools.panels API to integrate your extension into Developer Tools window UI: create your own panels, access existing panels, and add sidebars.

chrome.devtools.panels – Google Chrome

The third special API for Chrome Devtools is inspectedWindow. The PubNub Console extension does not make use of it, but it’s worth an overview.

Use the chrome.devtools.inspectedWindow API to interact with the inspected window: obtain the tab ID for the inspected page, evaluate the code in the context of the inspected window, reload the page, or obtain the list of resources within the page.

chrome.devtools.inspectedWindow – Google Chrome

I’ve made a few extensions in the past, so I started with the Chrome Preprocessor Example from the samples page.

Sample Extensions – Google Chrome

The goal here is to provide a general overview of how our Devtools extension works, but not necessarily a tutorial on how to make a full extension. However, if you want to follow along at home you’ll notice that almost everything you need to get started is within the Panel directory. I also highly recommend taking a look at the rest of the devtools examples.

Using the chrome.devtools.network API

Let’s take a look at how to monitor network traffic. We start by register a watcher for all page requests and fire a function when a new one is complete:

Great, now whenever a new network request is finished our function is fired. It works just like the Network tab.

But we don’t want every request, just stuff from PubNub. So let’s take a look at exactly what this function is returning to us so we can filter it.

Network requests information is represented in the HTTP Archive format (HAR). The description of HAR is outside of scope of this document, please refer to HAR v1.2 Specification.

So we can access the URI of the request through the *,request.url parameter. I did some googling and found this awesome URI parser gist which will really help us out.

Now it’s just a matter of parsing the URI according to the PubNub Rest Push API. All PubNub push traffic is sent through the request headers, so this is all we need to keep track of PubNub publish.

However, the body of subscribe calls is sent through the request content. You’ll notice from the chrome.devtools.network documentation that we don’t get request content for free.

There’s an additional function we need to call. It is cleverly named getContent() and is a property of the object returned from the first function.

And that’s the core of it! From here the extension does some additional work to check if PubNub messages have been bundled. Everything else is formatting, user interface, and shiny graphs.