Giter Club home page Giter Club logo

algolia-analyzer's Introduction

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

algolia-analyzer's People

Contributors

dependabot[bot] avatar e-krebs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.