Skip to content

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

License

Notifications You must be signed in to change notification settings

algolia/algolia-analyzer

Folders and files

NameName
Last commit message
Last commit date
Feb 2, 2024
Jul 4, 2023
Feb 2, 2024
Apr 4, 2024
Jul 1, 2022
Mar 1, 2024
Jul 1, 2022
Jul 1, 2022
Jul 1, 2022
Jul 1, 2022
Jul 4, 2023
Jan 16, 2024
Jul 1, 2022
Feb 2, 2024
Jul 4, 2023
Apr 4, 2024
Mar 1, 2024
Jan 16, 2024
Dec 14, 2024

Repository files navigation

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

About

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

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published