# 使用react-dev-inspector调试组件

第一步使用react-dev-inspector包裹main.tsx

pnpm add -D react-dev-inspector
pnpm add -D @react-dev-inspector/vite-plugin

1
2

https://react-dev-inspector.zthxxx.me/docs/inspector-component

# @react-dev-inspector/vite-plugin

在Vite项目中选择dom打开对应组件

https://react-dev-inspector.zthxxx.me/docs/integration/vite

Rollup Plugin Visualizer

https://www.npmjs.com/package/rollup-plugin-visualizer

npm i rollup-plugin-visualizer -D

Usage with vite (vite.config.js)

module.exports = {
  plugins: [visualizer()],
};

1
2
3

vite-bundle-analyzer