Vite插件调试神器 – vite-plugin-inspect 完整使用指南

简介

vite-plugin-inspect 是一个强大的 Vite 插件，用于检查和调试 Vite 插件的中间状态。它能够帮助开发者深入了解 Vite 构建过程中的模块转换，是调试和开发 Vite 插件的必备工具。

主要特性

• 实时检查: 在开发模式下实时查看模块转换过程
• 构建模式支持: 支持在构建模式下检查转换结果
• 可视化界面: 提供直观的 Web 界面查看模块信息
• 插件开发: 为 Vite 插件开发者提供强大的调试工具
• 零配置: 开箱即用，无需复杂配置

安装

# 使用 npm
npm install -D vite-plugin-inspect

# 使用 yarn
yarn add -D vite-plugin-inspect

# 使用 pnpm
pnpm add -D vite-plugin-inspect

版本兼容性

• v10.x: 需要 Vite v6.0.1 或更高版本
• v0.8.x: 兼容 Vite v2 到 v5，同时向前兼容 Vite 6

基础使用

开发模式

在 vite.config.ts 中添加插件：

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

export default defineConfig({
  plugins: [Inspect()],
});

启动开发服务器后，访问 http://localhost:5173/__inspect/ 即可查看模块转换信息。

构建模式

如需在构建模式下检查转换结果，可以启用 build 选项：

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

export default defineConfig({
  plugins: [
    Inspect({
      build: true,
      outputDir: ".vite-inspect",
    }),
  ],
});

构建完成后，检查器客户端将生成在 .vite-inspect 目录下，使用以下命令查看结果：

npx serve .vite-inspect

配置选项

interface InspectOptions {
  /**
   * 是否在构建模式下启用检查
   * @default false
   */
  build?: boolean;

  /**
   * 构建模式下的输出目录
   * @default '.vite-inspect'
   */
  outputDir?: string;

  /**
   * 是否在开发模式下启用
   * @default true
   */
  dev?: boolean;
}

使用场景

插件开发调试

在开发 Vite 插件时，使用此工具可以：

• 查看插件对模块的转换结果
• 验证插件的执行顺序
• 调试转换过程中的问题

// 示例：开发一个简单的转换插件
import { Plugin } from "vite";
import Inspect from "vite-plugin-inspect";

function myTransformPlugin(): Plugin {
  return {
    name: "my-transform",
    transform(code, id) {
      if (id.endsWith(".vue")) {
        return {
          code: code.replace(/console\.log/g, "// console.log"),
          map: null,
        };
      }
    },
  };
}

export default defineConfig({
  plugins: [
    Inspect(), // 添加检查器
    myTransformPlugin(),
  ],
});

构建优化分析

分析不同插件对构建性能的影响：

export default defineConfig({
  plugins: [
    Inspect({ build: true }),
    // 其他插件...
  ],
});

模块依赖分析

查看模块之间的依赖关系和转换链：

• 模块的原始内容
• 经过各个插件转换后的内容
• 转换时间统计
• 插件执行顺序

常见问题

Q: 检查器界面无法访问？

A: 确保开发服务器正在运行，并且端口号正确。默认访问地址为 http://localhost:5173/__inspect/

Q: 构建模式下没有生成检查器文件？

A: 确保设置了 build: true 选项，并且运行了 vite build 命令

Q: 如何查看特定模块的转换过程？

A: 在检查器界面中，可以通过文件路径搜索或点击模块树来查看特定模块的详细信息

最佳实践

1. 开发阶段: 始终启用检查器来监控插件行为
2. 性能分析: 使用构建模式检查器分析生产构建
3. 插件调试: 结合浏览器开发者工具进行深度调试
4. 团队协作: 在团队中统一使用检查器进行问题排查