Vite plugin forreact-dev-inspector Docs see:https://react-dev-inspector.zthxxx.me/docs/integration/vite Readme Keywords none npm i@react-dev-inspector/vite-plugin Repository github.com/zthxxx/react-dev-inspector/tree/master Homepage github.com/zthxxx/react-dev-inspector ...
react-dev-inspector用来通过页面快速定位到代码,在main.jsx中进行了配置,在页面中可使用control + y可跳转到 vscode 中代码对用位置 postcss-pxtorem用来将 css 中的 px 单位转换为 rem,react-jss和行内样式无效 viteCompression用来配置开启 gzip 打包
Wait for inspector devtools to open in your browser and the debugger to attach. In the sources panel in the right column, click the play button to resume execution, and allow the tests to run, which will open a Chromium instance. Focusing the Chromium instance, you can open the browser de...
npm i -D unplugin-react-inspector Usage Configuration Vite import{vitePluginasreactInspectorPlugin}from"unplugin-react-inspector";// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[...reactInspectorPlugin({enabled:true})],}); ...
import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], build: { sourcemap: true }, }) 这个source 面板的功能就非常强大了,可以打断点、单步调试、调用栈、查看上下文对象等等,这一块的内容在下面的内容中介绍!
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/ plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC] ...
module.exports = override( addBabelPlugin([ 'react-dev-inspector/plugins/babel', // plugin options docs see: // https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options { excludes: [ /xxxx-want-to-ignore/, ], }, ]), addWebpackPlugin( new ReactInspectorPlugin(), )...
Here is the working pipeline ofreact-dev-inspector: 0. Inject JSX Source The compiler'spluginrecords source path info into React components during development stage. Note:The0ofPart.0implies that this section is generallyOPTIONAL. Most React frameworks offer this featureout-of-the-box, which mean...
同时按下InspectorWrapper中keys的键后,点击 UI 跳转到源码。 3 添加配置 代码语言:javascript 复制 // babelrc.jsexportdefault{plugins:[// plugin options docs see:// https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options'react-dev-inspector/plugins/babel',],} ...
"dev": "vite", "build": "tsc && vite build", "preview": "vite preview" }, "dependencies": { "preact": "^10.19.2" }, "devDependencies": { "@preact/preset-vite": "^2.7.0", "code-inspector-plugin": "^0.6.1", "typescript": "^5.2.2", "vite": "^5.0.2" } }Incompatibl...