How much time do you spend in your browser’s DevTools? C’mon, be honest. It’s a lot, isn’t it? Don’t worry, I do too — I’m Emmanuel, an engineer here at Algolia. Sometimes I spend hours debugging requests and API calls, so I’ve become very, very good friends with the Network tab in DevTools. But like any tumultuous relationship, we have communication problems: often I’ll ask it for information about some API call, but the information that DevTools gives me isn’t clear or it isn’t as helpful as I was expecting.

And then I had an idea. I’m a developer, right? Instead of relying on the generic tool to fit my very specific Algolia-focused use case, why can’t I just build a Chrome extension that helps me debug Algolia requests?

So I did. On a high-level, the extension adds a new panel in Chrome DevTools called “Algolia Analyzer”. This was fairly difficult at first — I have experience with extensions, but not with adding them to DevTools. I found the right docs, but they were not updated for the version 3 manifest. Luckily, it’s mostly compatible, but that kind of hiccup straight out of the gate doesn’t fill me with hope. After some finagling, I was able to get this new, custom panel to show up:

The first thing that I wanted to build was a small utility to check the access control list of an API key. This is incredibly helpful because we should never, ever, ever use the admin API key for a frontend Algolia application (or for any application, if we can help it). You’re only given that one as a sort of universal key than can unlock any of Algolia’s features, including deleting everything and signing you up for the more expensive plans — definitely features that could be misused if they were to be put in the wrong context. That admin key lets us make roles and API keys with only certain permissions, and we only use those inside of our application. So I added this functionality in here in order to avoid having to go into our Algolia dashboard every time that we want to check what permissions a given API key has.

To test it out, I went to a site my coworker Jaden made for a recent Algolia-themed project and ran his admin key. Here’s what it looks like, obviously with the API key covered:

Of course, there are some dangerous abilities in here, which is why we’d never want to use it on the frontend (or anywhere, if possible). Imagine some troublemaker sees you’ve used your admin key and deleteIndexs your entire Algolia search index. With the default search API key, it should look more like this:

Much better.

Another helpful feature: a list of the requests made to the server:

This updates automatically, so it shows us exactly how our program is interacting with Algolia. This particular app only has one initial search request (just to show the initial page of results), but that goes up when you actually start searching:

After typing four characters into the search box, you’ve made five searches (in this case, I typed in luke, so Algolia was pinged for a blank request, l, lu, luk, and luke). Those boxes just above the results let me filter for certain types of results only, which is very helpful if you’re getting back strange errors or if you’re working with multiple Algolia application IDs.

If you click on any of these requests, you’ll get a side window explaining everything about that request:

In this initial description, there’s already plenty of information that I find myself often needing during debugging. For example, the stereotypical troubleshooting question is “are you on the latest version of __?”, and here we can tell the exact versions of all of the relevant libraries in the x-algolia-agent parameter. It was definitely possible to find this information within DevTools before, but here’s what that part looks like in the Network tab:

It’s a big improvement, right?

Right beneath that is a tidy version of the response that we got from Algolia:

Of course, we had access to all of this data in our code and in the more generic DevTools view, but now we don’t need to worry about sticking console.logs everywhere or burrowing deep into a view that was designed primarily to help you figure out which CSS file you’re loading. All of the Algolia-specific information is now right there, all in one place, thanks to my Algolia Analyzer browser extension.

I can’t pretend like that just happened, though. It was actually rather difficult to map out which information should be placed where. I had to consciously cut a few pieces that weren’t really needed so that they wouldn’t crowd out the important bits. A lot of thought went into how the information here is architected. I was able to use React in this project, so it made that organization process a little bit more streamlined.

If you’re interested in using this extension, I’d love to hear your feedback! Let me know if you could use something else in the the new DevTools tab by tweeting @Algolia and by adding a PR to the GitHub repo! I’m excited to hear your thoughts!