@cheng.du100/api-debug-panel

Framework agnostic frontend API debug panel. Supports fetch, XMLHttpRequest, optional axios interception, Shadow DOM UI and Vue 2/3 plugin usage.

Runtime Compatibility

• Browser runtime: modern browsers with fetch/XHR support.
• Package syntax target: ES2019.
• Node.js for install/build tooling: 16-20.

Install

npm install @cheng.du100/api-debug-panel

Basic Usage

import { initApiDebugPanel } from '@cheng.du100/api-debug-panel';

const panel = initApiDebugPanel({
  enabled: false,
  timeout: 10000,
  position: 'bottom-right',
  includeSuccess: false,
  ignoreUrls: ['/health', '/metrics']
});

panel.enable();
panel.disable();
panel.setEnabled(true);

Switch Config

The panel is disabled by default unless you explicitly enable it.

initApiDebugPanel({ enabled: true });

Use enabled: 'auto' to read a browser-side switch. Empty or missing values mean disabled.

initApiDebugPanel({
  enabled: 'auto',
  queryKey: 'api_debug',
  storageKey: 'API_DEBUG',
  globalKey: '__API_DEBUG__'
});

Supported truthy values: 1, true, yes, on, enable, enabled.

Supported falsy values: 0, false, no, off, disable, disabled.

Examples:

localStorage.setItem('API_DEBUG', '1');
window.__API_DEBUG__ = true;
// Or open: https://example.com?api_debug=1

You can also pass a custom resolver:

initApiDebugPanel({
  enabled: () => import.meta.env.DEV || localStorage.getItem('API_DEBUG') === '1'
});

Vue 3

import { createApp } from 'vue';
import App from './App.vue';
import { createApiDebugPanelPlugin } from '@cheng.du100/api-debug-panel/vue';

createApp(App)
  .use(createApiDebugPanelPlugin({
    enabled: 'auto',
    timeout: 10000,
    includeSuccess: false
  }))
  .mount('#app');

In a production app, prefer a guarded resolver:

createApiDebugPanelPlugin({
  enabled: () => import.meta.env.DEV || localStorage.getItem('API_DEBUG') === '1'
});

Vue 2

import Vue from 'vue';
import App from './App.vue';
import ApiDebugPanelVue2 from '@cheng.du100/api-debug-panel/vue2';

Vue.use(ApiDebugPanelVue2, {
  enabled: 'auto',
  timeout: 10000,
  includeSuccess: true,
  position: 'bottom-right'
});

new Vue({
  render: h => h(App)
}).$mount('#app');

The controller is available as this.$apiDebugPanel by default. You can customize the property name:

Vue.use(ApiDebugPanelVue2, {
  enabled: 'auto',
  propertyName: '$debugApi'
});

You can also use the core API directly in Vue 2:

import { initApiDebugPanel } from '@cheng.du100/api-debug-panel';

Vue.prototype.$apiDebugPanel = initApiDebugPanel({ enabled: 'auto' });

Axios

const panel = initApiDebugPanel({ enabled: true });
panel.interceptAxios(axiosInstance);

API

• initApiDebugPanel(options)
• destroyApiDebugPanel()
• setApiDebugEnabled(boolean)
• isApiDebugEnabled()
• clearApiDebugRecords()
• getApiDebugRecords()
• controller.enable()
• controller.disable()
• controller.setEnabled(boolean)
• controller.isEnabled()
• controller.interceptAxios(axiosInstance)

Options

type ApiDebugPanelOptions = {
  enabled?: boolean | 'auto' | (() => boolean);
  timeout?: number;
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  includeSuccess?: boolean;
  ignoreUrls?: Array<string | RegExp | ((url: string) => boolean)>;
  maxRecords?: number;
  captureRequestBody?: boolean;
  captureResponseBody?: boolean;
  captureHeaders?: boolean;
  maskFields?: string[];
  title?: string;
  zIndex?: number;
  queryKey?: string;
  storageKey?: string;
  globalKey?: string;
};

Security

The panel is disabled unless enabled resolves to true. Sensitive fields such as authorization, cookie, token and password are masked by default.