Search by Algolia
What is ecommerce merchandising? Key components and best practices
e-commerce

What is ecommerce merchandising? Key components and best practices

A potential customer is about to land on the home page of your ecommerce platform, curious to see what cool ...

Catherine Dee

Search and Discovery writer

AI-powered search: From keywords to conversations
ai

AI-powered search: From keywords to conversations

By now, everyone’s had the opportunity to experiment with AI tools like ChatGPT or Midjourney and ponder their inner ...

Chris Stevenson

Director, Product Marketing

Vector vs Keyword Search: Why You Should Care
ai

Vector vs Keyword Search: Why You Should Care

Search has been around for a while, to the point that it is now considered a standard requirement in many ...

Nicolas Fiorini

Senior Machine Learning Engineer

What is AI-powered site search?
ai

What is AI-powered site search?

With the advent of artificial intelligence (AI) technologies enabling services such as Alexa, Google search, and self-driving cars, the ...

John Stewart

VP Corporate Marketing

What is a B2B marketplace?
e-commerce

What is a B2B marketplace?

It’s no secret that B2B (business-to-business) transactions have largely migrated online. According to Gartner, by 2025, 80 ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

3 strategies for B2B ecommerce growth: key takeaways from B2B Online - Chicago
e-commerce

3 strategies for B2B ecommerce growth: key takeaways from B2B Online - Chicago

Twice a year, B2B Online brings together industry leaders to discuss the trends affecting the B2B ecommerce industry. At the ...

Elena Moravec

Director of Product Marketing & Strategy

Deconstructing smart digital merchandising
e-commerce

Deconstructing smart digital merchandising

This is Part 2 of a series that dives into the transformational journey made by digital merchandising to drive positive ...

Benoit Reulier
Reshma Iyer

Benoit Reulier &

Reshma Iyer

The death of traditional shopping: How AI-powered conversational commerce changes everything
ai

The death of traditional shopping: How AI-powered conversational commerce changes everything

Get ready for the ride: online shopping is about to be completely upended by AI. Over the past few years ...

Aayush Iyer

Director, User Experience & UI Platform

What is B2C ecommerce? Models, examples, and definitions
e-commerce

What is B2C ecommerce? Models, examples, and definitions

Remember life before online shopping? When you had to actually leave the house for a brick-and-mortar store to ...

Catherine Dee

Search and Discovery writer

What are marketplace platforms and software? Why are they important?
e-commerce

What are marketplace platforms and software? Why are they important?

If you imagine pushing a virtual shopping cart down the aisles of an online store, or browsing items in an ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is an online marketplace?
e-commerce

What is an online marketplace?

Remember the world before the convenience of online commerce? Before the pandemic, before the proliferation of ecommerce sites, when the ...

Catherine Dee

Search and Discovery writer

10 ways AI is transforming ecommerce
e-commerce

10 ways AI is transforming ecommerce

Artificial intelligence (AI) is no longer just the stuff of scary futuristic movies; it’s recently burst into the headlines ...

Catherine Dee

Search and Discovery writer

AI as a Service (AIaaS) in the era of "buy not build"
ai

AI as a Service (AIaaS) in the era of "buy not build"

Imagine you are the CTO of a company that has just undergone a massive decade long digital transformation. You’ve ...

Sean Mullaney

CTO @Algolia

By the numbers: the ROI of keyword and AI site search for digital commerce
product

By the numbers: the ROI of keyword and AI site search for digital commerce

Did you know that the tiny search bar at the top of many ecommerce sites can offer an outsized return ...

Jon Silvers

Director, Digital Marketing

Using pre-trained AI algorithms to solve the cold start problem
ai

Using pre-trained AI algorithms to solve the cold start problem

Artificial intelligence (AI) has quickly moved from hot topic to everyday life. Now, ecommerce businesses are beginning to clearly see ...

Etienne Martin

VP of Product

Introducing Algolia NeuralSearch
product

Introducing Algolia NeuralSearch

We couldn’t be more excited to announce the availability of our breakthrough product, Algolia NeuralSearch. The world has stepped ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

AI is eating ecommerce
ai

AI is eating ecommerce

The ecommerce industry has experienced steady and reliable growth over the last 20 years (albeit interrupted briefly by a global ...

Sean Mullaney

CTO @Algolia

Semantic textual similarity: a game changer for search results and recommendations
product

Semantic textual similarity: a game changer for search results and recommendations

As an ecommerce professional, you know the importance of providing a five-star search experience on your site or in ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

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:

Algolia Analyzer browser extension DevTools tab screenshot

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:

Algolia Analyzer browser extension screenshot admin API keys hidden

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:

Algolia Analyzer browser extension screenshot secure API key shown

Much better.

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

Algolia Analyzer browser extension screenshot first POST request view

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:

Algolia Analyzer browser extension screenshot subsequent POST request from search query view

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:

Algolia Analyzer browser extension screenshot request detailed view

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:

Algolia Analyzer browser extension screenshot requests response standard DevTools Network tab view

It’s a big improvement, right?

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

Algolia Analyzer browser extension screenshot response detailed view

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!

About the author
Emmanuel Krebs

Sr. Software Engineer

githubtwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Post-Exit Year in Review
algolia

Ciprian Borodescu

AI Product Manager | On a mission to help people succeed through the use of AI

Advice to women in tech from Algolia's female leaders: Part I
algolia

Ivana Ivanovic

Senior Content Strategist

Teaching English with Zapier and Algolia
engineering

Alita Leite da Silva