TezXTezX
ToolkitHelper

TezX DevTools

Developer-friendly diagnostics panel for TezX apps. Inspect routes, middlewares, cookies, environment variables, and add custom debug tabs.


Installation

npm install @tezx/devtools tezx
# or
bun install @tezx/devtools tezx
# or
yarn add @tezx/devtools tezx

Quick Usage

import { TezX } from "tezx";
import DevTools from "@tezx/devtools";

const app = new TezX();

app.get("/devtools", DevTools(app, {
  // Optional:
  // disableTabs: ['cookies', 'routes'],
  // extraTabs: (ctx) => [ ... ]
}));

Visit: http://localhost:3000/devtools

  • Real-time dashboard showing app diagnostics.

Built-in Tabs

TabDescription
routesLists all loaded routes with method, path, and source
middlewaresShows registered middlewares and their routes
cookiesDisplays request cookies parsed from ctx
.envLists environment variables loaded via .env

API

DevTools(app: TezX<any>, options?: Options): Callback

Options

OptionTypeDescription
extraTabs(ctx) => TabType | Promise<TabType>Add custom tab panels
disableTabsArray<'cookies' | 'routes'| '.env'| 'middlewares'>Hide built-in tabs

Types

type Tab = "cookies" | "routes" | ".env" | "middlewares";

type TabType = {
  doc_title: string;
  label: string;
  tab: Tab | string;
  content: string; // Rendered HTML
}[];

type Options = {
  extraTabs?: (ctx: Context) => Promise<TabType> | TabType;
  disableTabs?: Tab[];
};