Inspect the intermediate state of Vite plugins. Useful for debugging and authoring plugins.
![Screenshot 2024-11-27 at 19 01 26](https://private-user-images.githubusercontent.com/11247099/390382872-ab6b86ac-d7ce-4424-a23f-02f265f547ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NTE5NzksIm5iZiI6MTczODk1MTY3OSwicGF0aCI6Ii8xMTI0NzA5OS8zOTAzODI4NzItYWI2Yjg2YWMtZDdjZS00NDI0LWEyM2YtMDJmMjY1ZjU0N2VhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA3VDE4MDc1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTIyNmEyZDY3NzFmZWE3ODhhNzYwYzkxNDc4NjlhOTcwNzFkNWMxZjk0YzYyZmFhMDMxYmJmNjFjODVmODdkNzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.v-XYsMbiAhPYoQhrXDwsgBZ2sWi0e8J9GPumIkGL69o)
npm i -D vite-plugin-inspect
Note
v10.x requires Vite v6.0.1 or above.
For Vite v2 to v5, use v0.8.x of vite-plugin-inspect
. If you want to use it with both Vite 6 and below, you can still use v0.8.x, it's forwards compatible.
Add plugin to your vite.config.ts
:
// vite.config.ts
import Inspect from 'vite-plugin-inspect'
export default {
plugins: [
Inspect()
],
}
Then run npm run dev
and visit localhost:5173/__inspect/ to inspect the modules.
To inspect transformation in build mode, you can pass the build: true
option:
// vite.config.ts
import Inspect from 'vite-plugin-inspect'
export default {
plugins: [
Inspect({
build: true,
outputDir: '.vite-inspect'
})
],
}
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.
MIT License © 2021-PRESENT Anthony Fu