Skip to content

antfu-collective/vite-plugin-inspect

vite-plugin-inspect

NPM version

Inspect the intermediate state of Vite plugins. Useful for debugging and authoring plugins.

Screenshot 2024-11-27 at 19 01 26

Install

Note

v12.x requires Vite v8.0.0 or above with @vitejs/devtools v0.1.9 or above.

For the previous versions, check the v11 branch.

pnpm add -D vite-plugin-inspect @vitejs/devtools

Add plugin to your vite.config.ts:

// vite.config.ts
import Inspect from 'vite-plugin-inspect'

export default {
  devtools: true,
  plugins: [
    Inspect()
  ],
}

Then run npm run dev and open the DevTools to inspect the modules.

Build Mode

To inspect transformation in build mode, you can set the devtools.build.withApp option to true:

// vite.config.ts
import Inspect from 'vite-plugin-inspect'

export default {
  devtools: {
    build: {
      withApp: true,
    }
  },
  plugins: [
    Inspect({
      build: true
    })
  ],
}

After running vite build, the inspector client will be generated under .vite-inspect, where you can use npx serve .vite-inspect to check the result.

Sponsors

Sponsors

License

MIT License © 2021-PRESENT Anthony Fu