dev-tool for inspect react components and jump to local IDE for component code.
Online demo: https://react-dev-inspector.zthxxx.me
Screen record (gif 8M):
npm i -D react-dev-inspector
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
... // Props see below
>
<XXXContent>
</XXXContent>
</InspectorWrapper>
)
}
after <Inspector>
component was mounted,you can use window.__REACT_DEV_INSPECTOR_TOGGLE__()
to toggle inspector.
typescript define you can see in react-dev-inspector/es/Inspector.d.ts
Property | Description | Type | Default |
---|---|---|---|
keys | inspector toggle hotkeys supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keys |
string[] |
['control', 'shift', 'command', 'c'] |
disableLaunchEditor | whether disable click react component to open IDE for view component code (launchEditor by default only support be used with react-dev-inpector plugins in dev) |
boolean |
false |
onHoverElement | trigged while inpector start and mouse hover in a HTMLElement | type ElementHandler |
- |
onClickElement | trigged while inpector start and mouse click on a HTMLElement | type ElementHandler |
- |
// .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',
],
},
})
import { inspectorChainWebpack } from 'react-dev-inspector/plugins/webpack/config-inspector'
inspectorChainWebpack(webpackConfigChain, { exclude: ['xxx-file'] })
code see: https://github.com/zthxxx/react-dev-inspector/tree/master/site
project preview: https://react-dev-inspector.zthxxx.me