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 ...
Search and Discovery writer
A potential customer is about to land on the home page of your ecommerce platform, curious to see what cool ...
Search and Discovery writer
By now, everyone’s had the opportunity to experiment with AI tools like ChatGPT or Midjourney and ponder their inner ...
Director, Product Marketing
Search has been around for a while, to the point that it is now considered a standard requirement in many ...
Senior Machine Learning Engineer
With the advent of artificial intelligence (AI) technologies enabling services such as Alexa, Google search, and self-driving cars, the ...
VP Corporate Marketing
It’s no secret that B2B (business-to-business) transactions have largely migrated online. According to Gartner, by 2025, 80 ...
Sr. SEO Web Digital Marketing Manager
Twice a year, B2B Online brings together industry leaders to discuss the trends affecting the B2B ecommerce industry. At the ...
Director of Product Marketing & Strategy
This is Part 2 of a series that dives into the transformational journey made by digital merchandising to drive positive ...
Benoit Reulier &
Reshma Iyer
Get ready for the ride: online shopping is about to be completely upended by AI. Over the past few years ...
Director, User Experience & UI Platform
Remember life before online shopping? When you had to actually leave the house for a brick-and-mortar store to ...
Search and Discovery writer
If you imagine pushing a virtual shopping cart down the aisles of an online store, or browsing items in an ...
Sr. SEO Web Digital Marketing Manager
Remember the world before the convenience of online commerce? Before the pandemic, before the proliferation of ecommerce sites, when the ...
Search and Discovery writer
Artificial intelligence (AI) is no longer just the stuff of scary futuristic movies; it’s recently burst into the headlines ...
Search and Discovery writer
Imagine you are the CTO of a company that has just undergone a massive decade long digital transformation. You’ve ...
CTO @Algolia
Did you know that the tiny search bar at the top of many ecommerce sites can offer an outsized return ...
Director, Digital Marketing
Artificial intelligence (AI) has quickly moved from hot topic to everyday life. Now, ecommerce businesses are beginning to clearly see ...
VP of Product
We couldn’t be more excited to announce the availability of our breakthrough product, Algolia NeuralSearch. The world has stepped ...
Chief Executive Officer and Board Member at Algolia
The ecommerce industry has experienced steady and reliable growth over the last 20 years (albeit interrupted briefly by a global ...
CTO @Algolia
As an ecommerce professional, you know the importance of providing a five-star search experience on your site or in ...
Sr. SEO Web Digital Marketing Manager
Aug 4th 2022 engineering
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