Search by Algolia
Add InstantSearch and Autocomplete to your search experience in just 5 minutes
product

Add InstantSearch and Autocomplete to your search experience in just 5 minutes

A good starting point for building a comprehensive search experience is a straightforward app template. When crafting your application’s ...

Imogen Lovera

Senior Product Manager

Best practices of conversion-focused ecommerce website design
e-commerce

Best practices of conversion-focused ecommerce website design

The inviting ecommerce website template that balances bright colors with plenty of white space. The stylized fonts for the headers ...

Catherine Dee

Search and Discovery writer

Ecommerce product listing pages: what they are and how to optimize them for maximum conversion
e-commerce

Ecommerce product listing pages: what they are and how to optimize them for maximum conversion

Imagine an online shopping experience designed to reflect your unique consumer needs and preferences — a digital world shaped completely around ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

DevBit Recap: Winter 2023 — Community
engineering

DevBit Recap: Winter 2023 — Community

Winter is here for those in the northern hemisphere, with thoughts drifting toward cozy blankets and mulled wine. But before ...

Chuck Meyer

Sr. Developer Relations Engineer

How to create the highest-converting product detail pages (PDPs)
e-commerce

How to create the highest-converting product detail pages (PDPs)

What if there were a way to persuade shoppers who find your ecommerce site, ultimately making it to a product ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Highlights from GopherCon Australia 2023
engineering

Highlights from GopherCon Australia 2023

This year a bunch of our engineers from our Sydney office attended GopherCon AU at University of Technology, Sydney, in ...

David Howden
James Kozianski

David Howden &

James Kozianski

Enhancing customer engagement: The role of conversational commerce
e-commerce

Enhancing customer engagement: The role of conversational commerce

Second only to personalization, conversational commerce has been a hot topic of conversation (pun intended) amongst retailers for the better ...

Michael Klein

Principal, Klein4Retail

Craft a unique discovery experience with AI-powered recommendations
product

Craft a unique discovery experience with AI-powered recommendations

Algolia’s Recommend complements site search and discovery. As customers browse or search your site, dynamic recommendations encourage customers to ...

Maria Lungu

Frontend Engineer

What are product detail pages and why are they critical for ecommerce success?
e-commerce

What are product detail pages and why are they critical for ecommerce success?

Winter is coming, along with a bunch of houseguests. You want to replace your battered old sofa — after all,  the ...

Catherine Dee

Search and Discovery writer

Why weights are often counterproductive in ranking
engineering

Why weights are often counterproductive in ranking

Search is a very complex problem Search is a complex problem that is hard to customize to a particular use ...

Julien Lemoine

Co-founder & former CTO at Algolia

How to increase your ecommerce conversion rate in 2024
e-commerce

How to increase your ecommerce conversion rate in 2024

2%. That’s the average conversion rate for an online store. Unless you’re performing at Amazon’s promoted products ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How does a vector database work? A quick tutorial
ai

How does a vector database work? A quick tutorial

What’s a vector database? And how different is it than a regular-old traditional relational database? If you’re ...

Catherine Dee

Search and Discovery writer

Removing outliers for A/B search tests
engineering

Removing outliers for A/B search tests

How do you measure the success of a new feature? How do you test the impact? There are different ways ...

Christopher Hawke

Senior Software Engineer

Easily integrate Algolia into native apps with FlutterFlow
engineering

Easily integrate Algolia into native apps with FlutterFlow

Algolia's advanced search capabilities pair seamlessly with iOS or Android Apps when using FlutterFlow. App development and search design ...

Chuck Meyer

Sr. Developer Relations Engineer

Algolia's search propels 1,000s of retailers to Black Friday success
e-commerce

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 ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

Generative AI’s impact on the ecommerce industry
ai

Generative AI’s impact on the ecommerce industry

When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What’s the average ecommerce conversion rate and how does yours compare?
e-commerce

What’s the average ecommerce conversion rate and how does yours compare?

Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What are AI chatbots, how do they work, and how have they impacted ecommerce?
ai

What are AI chatbots, how do they work, and how have they impacted ecommerce?

“Hello, how can I help you today?”  This has to be the most tired, but nevertheless tried-and-true ...

Catherine Dee

Search and Discovery writer

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

4 questions to ask for relevant search results
product

Jaden Baptista

Technical Writer