CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vite-plugin-inspect

Inspect the intermediate state of Vite plugins during development and build processes

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Vite Plugin Inspect

Vite Plugin Inspect is a development and debugging tool that provides comprehensive visualization and analysis of Vite plugin transformations. It offers a web-based interface for inspecting the intermediate states of modules during the Vite build process, helping developers understand how plugins transform code, debug transformation issues, and optimize build performance.

Package Information

  • Package Name: vite-plugin-inspect
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D vite-plugin-inspect

Core Imports

import Inspect from 'vite-plugin-inspect';

For CommonJS:

const Inspect = require('vite-plugin-inspect');

For Nuxt integration:

import InspectModule from 'vite-plugin-inspect/nuxt';

Basic Usage

// vite.config.ts
import { defineConfig } from 'vite';
import Inspect from 'vite-plugin-inspect';

export default defineConfig({
  plugins: [
    Inspect({
      dev: true,        // Enable in dev mode
      build: false,     // Disable in build mode
      open: false,      // Don't auto-open browser
      silent: false     // Show console messages
    })
  ],
});

After starting dev server, visit http://localhost:5173/__inspect/ to access the inspection interface.

Architecture

Vite Plugin Inspect is built around several key components:

  • Main Plugin: Core Vite plugin that intercepts and tracks transformations across all other plugins
  • Web Interface: Browser-based UI for visualizing module transformations, dependencies, and performance metrics
  • RPC Server: Real-time communication between the plugin and web interface using WebSocket
  • Context Management: Tracks multiple Vite instances and environments with isolated data
  • Build Mode: Static HTML generation for inspecting build-time transformations
  • Performance Tracking: Middleware and plugin performance monitoring with detailed timing metrics

Capabilities

Plugin Configuration

Core configuration options for controlling inspection behavior, filtering, and output settings.

function Inspect(options?: ViteInspectOptions): Plugin;

interface ViteInspectOptions {
  dev?: boolean;
  build?: boolean;
  outputDir?: string;
  include?: FilterPattern;
  exclude?: FilterPattern;
  base?: string;
  silent?: boolean;
  open?: boolean;
  removeVersionQuery?: boolean;
  embedded?: boolean;
}

type FilterPattern = ReadonlyArray<string | RegExp> | string | RegExp | null;

Configuration

Module Inspection

Access to detailed information about module transformations, dependencies, and plugin interactions.

interface ModuleInfo {
  id: string;
  plugins: { name: string; transform?: number; resolveId?: number; }[];
  deps: string[];
  importers: string[];
  virtual: boolean;
  totalTime: number;
  invokeCount: number;
  sourceSize: number;
  distSize: number;
}

interface ModuleTransformInfo {
  resolvedId: string;
  transforms: TransformInfo[];
}

interface TransformInfo {
  name: string;
  result?: string;
  start: number;
  end: number;
  order?: string;
  sourcemaps?: any;
  error?: ParsedError;
}

Module Inspection

Performance Metrics

Plugin and server performance monitoring with detailed timing and invocation data.

interface PluginMetricInfo {
  name: string;
  enforce?: string;
  transform: {
    invokeCount: number;
    totalTime: number;
  };
  resolveId: {
    invokeCount: number;
    totalTime: number;
  };
}

interface ServerMetrics {
  middleware?: Record<string, { name: string; self: number; total: number; }[]>;
}

Performance Metrics

Programmatic API

RPC functions for programmatic access to inspection data from external tools.

interface ViteInspectAPI {
  rpc: RpcFunctions;
}

interface RpcFunctions {
  getMetadata(): Promise<Metadata>;
  getModulesList(query: QueryEnv): Promise<ModulesList>;
  getModuleTransformInfo(query: QueryEnv, id: string, clear?: boolean): Promise<ModuleTransformInfo>;
  getPluginMetrics(query: QueryEnv): Promise<PluginMetricInfo[]>;
  getServerMetrics(query: QueryEnv): Promise<ServerMetrics>;
  resolveId(query: QueryEnv, id: string): Promise<string>;
  onModuleUpdated(): Promise<void>;
}

Programmatic API

Nuxt Integration

Dedicated Nuxt.js module for seamless integration with Nuxt projects.

interface ModuleOptions extends ViteInspectOptions {}

function defineNuxtModule<T>(options: ModuleOptions): NuxtModule<T>;

Nuxt Integration

Types

interface QueryEnv {
  vite: string;  // Vite instance ID
  env: string;   // Environment name
}

interface QueryId extends QueryEnv {
  id: string;    // Module ID
}

interface ParsedError {
  message: string;
  stack: StackFrame[];
  raw?: any;
}

interface ResolveIdInfo {
  name: string;
  result: string;
  start: number;
  end: number;
  order?: string;
  error?: ParsedError;
}

interface InstanceInfo {
  root: string;
  vite: string;                    // Vite instance ID
  environments: string[];          // Environment names
  plugins: SerializedPlugin[];     // Plugins
  environmentPlugins: Record<string, number[]>; // Environment plugin indices
}

interface Metadata {
  instances: InstanceInfo[];
  embedded?: boolean;
}

interface SerializedPlugin {
  name: string;
  enforce?: string;
  resolveId: string;
  load: string;
  transform: string;
  generateBundle: string;
  handleHotUpdate: string;
  api: string;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-inspect@11.3.x
Publish Source
CLI
Badge
tessl/npm-vite-plugin-inspect badge