DevTools Plugin

Read the API Reference »

Devtools plugin allow you to connect your application to a HyperFlow. It allows you to inspect the requests and responses, inspect and modify cache and to control the requests.

---

Purpose

1. Real-time Request Inspection: Monitor all incoming and outgoing requests and their corresponding responses within your application in real-time.
2. Advanced Cache Management: Gain full control over the cache, allowing you to inspect, modify, and clear cached data on the fly.
3. Interactive Request Control: Manage your application's data flow with options to cancel, pause, and resume requests directly from the devtools.

---

Install the Plugin

Install the ESLint plugin using npm or yarn:

npm

npm install @hyper-fetch/plugin-devtools

yarn

yarn add @hyper-fetch/plugin-devtools

pnpm

pnpm add @hyper-fetch/plugin-devtools

---

Usage

Import the plugin and use it in your application:

Import

import { DevtoolsPlugin } from "@hyper-fetch/plugin-devtools"

import { DevtoolsPlugin } from "@hyper-fetch/plugin-devtools";

const client = new Client({ url: "http://localhost:3000" }).addPlugin(
  DevtoolsPlugin({
    appName: "My App",
  }),
);

DevtoolsPluginOptions

Name	Type	Description
appName	string	Name of your application, it will be displayed in the HyperFlow app
debug	boolean	Enable debug mode logs, so you can see what's happening in plugin
environment	string	App environment indication
url	string	URL of the HyperFlow server Needed only if you change the default port in the HyperFlow app

HyperFlow

Learn more about HyperFlow devtools and how to use it