/algolia-analyzer

a browser extension to add a dedicated devtool to analyse requests to algolia servers

Primary LanguageTypeScriptMIT LicenseMIT

Algolia Analyzer

What

Algolia Analyzer is a browser extension that adds a new panel in your devtools. That panel will capture requests made to algolia servers (algolianet.com, algolia.net) and will allow you to analyze those request. It also provides a small tool to check the acl of an Algolia API Key.

Install

  • Download the zip file attached to the latest release
  • Unpack that zip file into a folder
  • visit chrome://extensions in your browser
  • toggle the top-right "Developer mode" toggle to active
  • click on the newly appeared "Load unpacked" button, and select the folder in which you unziped the zip file
    • you should see "Algolia Analyzer" in the list of your extensions!
  • you might need to restart your browser for the new ⏱️ Algolia Analyzer tab to appear in your devtools

Screens

on the main network panel, see a list requests to Algolia servers, and filter them by api, cluster, index, api subpath, etc.

see detailed information about each request (query string parameters, request header, request & response bodies) in beautifully formatted JSON.

on the tools panel, check API key & get index settings.

Dev & Run

yarn // first install dependencies
yarn build // then build the extension

Then, you can go into chrome and import it:

  • visit chrome://extensions in your browser
  • toggle the top-right "Developer mode" toggle to active
  • click on the newly appeared "Load unpacked" button, and select the folder ./dist/webext-prod
    • you should see "Algolia Analyzer" in the list of your extensions!
  • you might need to restart your browser for the new ⏱️ Algolia Analyzer tab to appear in your devtools

Alternatively for an dev experience with file watching, you can run yarn start (instead of yarn build) and load the folder ./dist/webext-dev

how to implement support for a new API

  • in utils/Requests.ts, add a new value in ApiType
    • this is the internal name of the API
  • this will require you to also update components/Tags > apiString
    • this is how the API will be displayed in the tags
  • in utils/constants.ts, update either urlPattern of urlPattern2
    • these are the patterns used to catch requests
    • if you need to add a new pattern, don't forget to:
      • update this documentation
      • update the code that depends on those pattern to handle this new one
  • finally, utils/getUrlData.ts is where the tags are extracted from the url
    • please add tests in utils\__tests__\getUrlData.test.ts for any new API you implement