Algolia's search propels 1,000s of retailers to Black Friday success
In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...
Chief Executive Officer and Board Member at Algolia
In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...
Chief Executive Officer and Board Member at Algolia
When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...
Senior Digital Marketing Manager, SEO
Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...
Senior Digital Marketing Manager, SEO
“Hello, how can I help you today?” This has to be the most tired, but nevertheless tried-and-true ...
Search and Discovery writer
We are proud to announce that Algolia was named a leader in the IDC Marketscape in the Worldwide General-Purpose ...
VP Corporate Marketing
Twice a year, B2B Online brings together America’s leading manufacturers and distributors to uncover learnings and industry trends. This ...
Director, Sales Enablement & B2B Practice Leader
Generative AI and large language models (LLMs). These two cutting-edge AI technologies sound like totally different, incomparable things. One ...
Search and Discovery writer
ChatGPT, Bing, Bard, YouChat, DALL-E, Jasper…chances are good you’re leveraging some version of generative artificial intelligence on ...
Search and Discovery writer
Your users are spoiled. They’re used to Google’s refined and convenient search interface, so they have high expectations ...
Technical Writer
Imagine if, as your final exam for a computer science class, you had to create a real-world large language ...
Sr. SEO Web Digital Marketing Manager
What do you think of the OpenAI ChatGPT app and AI language models? There’s lots going on: GPT-3 ...
Search and Discovery writer
In the fast-paced and dynamic realm of digital merchandising, being reactive to customer trends has been the norm. In ...
Staff User Researcher
You’re at a dinner party when the conversation takes a computer-science-y turn. Have you tried ChatGPT? What ...
Sr. SEO Web Digital Marketing Manager
It’s the era of Big Data, and super-sized language models are the latest stars. When it comes to ...
Search and Discovery writer
Did you know that 86% of the global population uses a smartphone? The 7 billion devices connected to the Internet ...
Staff SME Business & Optimization - UI/UX
The Cloud Native Foundation is known for being the organization behind Kubernetes and many other Cloud Native tools. To foster ...
TL;DR Revamp your technical documentation search experience with DocSearch! Previously only available to open-source projects, we're excited ...
Senior Engineering Manager
Relevance – it’s what we’re all going for with our search implementations, but it’s so subjective that it ...
Technical Writer
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 deleteIndex
s 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.log
s 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!
Powered by Algolia Recommend