or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdmodule-inspection.mdnuxt-integration.mdperformance-metrics.mdprogrammatic-api.md
tile.json

tessl/npm-vite-plugin-inspect

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-inspect@11.3.x

To install, run

npx @tessl/cli install tessl/npm-vite-plugin-inspect@11.3.0

index.mddocs/

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;
}