react-dev-inspector

React Dev Inspector

Usage & Config

Use in React

import React from 'react'
import { Inspector } from 'react-dev-inspector'

const InspectorWrapper = process.env.NODE_ENV === 'development'
  ? Inspector
  : React.Fragment

export const Layout = () => { 
  // ...
  
  return (
    <InspectorWrapper
      // keys={['control', 'shift', 'command', 'c']} // default keys
    >
     <XXXContent>
     </XXXContent>
    </InspectorWrapper>
  )
}

Plugin for umi3

// .umirc.dev.ts

// https://umijs.org/config/
import { defineConfig } from 'umi'

export default defineConfig({
  plugins: [
    'react-dev-inspector/plugins/umi/react-inspector',
  ],
  inspectorConfig: {
    exclude: [
      'xxx-file-will-be-exclude',
    ], 
  },
})

Plugin for manual used in webpack

import { inspectorChainWebpack } from 'react-dev-inspector/plugins/webpack/config-inspector'


inspectorChainWebpack(webpackConfigChain, { exclude: ['xxx-file'] })

License

MIT LICENSE