
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-dev-inspector
Advanced tools
dev-tool for inspect react components and jump to local IDE for component code.
This package allows users to jump to local IDE code directly from browser React component by just a simple click, which is similar to Chrome inspector but more advanced.
online demo: https://react-dev-inspector.zthxxx.me
press hotkey (
ctrl⌃ + shift⇧ + commmand⌘ + c
), then click the HTML element you wish to inspect.
screen record gif (8M size):
npm i -D react-dev-inspector
Users need to add React component and apply webpack config before connecting your React project with 'react-dev-inspector'.
Note: You should NOT use this package, and React component, webpack config in production mode
import React from 'react'
import { Inspector, InspectParams } from 'react-dev-inspector'
const InspectorWrapper = process.env.NODE_ENV === 'development'
? Inspector
: React.Fragment
export const Layout = () => {
// ...
return (
<InspectorWrapper
// props docs see:
// https://github.com/zthxxx/react-dev-inspector#inspector-component-props
keys={['control', 'shift', 'command', 'c']}
disableLaunchEditor={false}
onHoverElement={(params: InspectParams) => {}}
onClickElement={(params: InspectParams) => {}}
>
<YourComponent>
...
</YourComponent>
</InspectorWrapper>
)
}
There are 4 ways to set up webpack config, please pick the one fit your project best.
In common cases (like create-react-app), you can use #raw-webpack-config,
If your project happen to use webpack-chain / umi2 / umi3, you can try out our integrated plugins / helper in #usage-with-webpack-chain, #usage-with-umi2 and #usage-with-umi3.
You should add:
to your current webpack config.
Example:
import { Configuration } from 'webpack'
import { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'
const config: Configuration = {
// ...
/**
* [compile time] for inject source code file info
*/
module: {
rules: [
{
enforce: 'pre',
test: /\.[jt]sx$/,
exclude: [
/node_modules/,
/file-you-want-exclude/,
],
use: [
{
loader: 'react-dev-inspector/plugins/webpack/inspector-loader',
options: [{
// loader options docs see:
// https://github.com/zthxxx/react-dev-inspector#inspector-loader-props
exclude: [
'xxx-file-will-be-exclude',
/regexp-to-match-file /,
],
babelPlugins: [],
babelOptions: {},
}],
},
],
},
],
},
/**
* [server side] webpack dev server side middleware for launch IDE app
*/
devServer: {
before: (app) => {
app.use(launchEditorMiddleware)
},
},
}
This is almost equivalent to raw webpack config
, except, it will NOT override devServer.before
, it only adds middleware before origin devServer.before
.
import { inspectorChainWebpack } from 'react-dev-inspector/plugins/webpack'
webpackChainConfig = inspectorChainWebpack(webpackChainConfig, {
// loader options docs see:
// https://github.com/zthxxx/react-dev-inspector#inspector-loader-props
exclude: [],
babelPlugins: [],
babelOptions: {},
})
This is also equivalent to usage with webpack-chain
Example .umirc.dev.ts
:
// https://umijs.org/config/
import { defineConfig } from 'umi'
export default defineConfig({
plugins: [
'react-dev-inspector/plugins/umi/react-inspector',
],
inspectorConfig: {
// loader options docs see:
// https://github.com/zthxxx/react-dev-inspector#inspector-loader-props
exclude: [],
babelPlugins: [],
babelOptions: {},
},
})
Example .umirc.dev.js
:
import { inspectorChainWebpack } from 'react-dev-inspector/plugins/webpack'
export default {
// ...
chainWebpack(config) {
inspectorChainWebpack(config, {
// ... options
})
return config
},
/**
* And you need to set `false` to `dll` in `umi-plugin-react`,
* becase these is a umi2 bug that `dll` cannot work with `devServer.before`
*
* https://github.com/umijs/umi/issues/2599
* https://github.com/umijs/umi/issues/2161
*/
}
<Inspector>
Component Propscheckout TS definition under react-dev-inspector/es/Inspector.d.ts
.
Property | Description | Type | Default |
---|---|---|---|
keys | inspector hotkeys supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keys | string[] | ['control', 'shift', 'command', 'c'] |
disableLaunchEditor | disable editor launching (launch by default in dev Mode, but not in production mode) | boolean | false |
onHoverElement | triggered when mouse hover in inspector mode | (params: InspectParams) => void | - |
onClickElement | triggered when mouse hover in inspector mode | (params: InspectParams) => void | - |
// import type { InspectParams } from 'react-dev-inspector'
interface InspectParams {
/** hover / click event target dom element */
element: HTMLElement,
/** nearest named react component fiber for dom element */
fiber?: React.Fiber,
/** source file line / column / path info for react component */
codeInfo?: {
lineNumber: string,
columnNumber: string,
relativePath: string,
},
/** react component name for dom element */
name?: string,
}
// import type { ParserPlugin, ParserOptions } from '@babel/parser'
// import type { InspectorConfig } from 'react-dev-inspector/plugins/webpack'
interface InspectorConfig {
/** patterns to exclude matched files */
exclude?: (string | RegExp)[],
/**
* add extra plugins for babel parser
* default is ['typescript', 'jsx', 'decorators-legacy', 'classProperties']
*/
babelPlugins?: ParserPlugin[],
/** extra babel parser options */
babelOptions?: ParserOptions,
}
This package uses react-dev-utils
to launch your local IDE application, but, which one will be open?
In fact, it uses an environment variable named REACT_EDITOR
to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.
For example, if you want it always open VSCode when inspection clicked, set export REACT_EDITOR=code
in your shell.
install VSCode command line tools, see the official docs
set env to shell, like .bashrc
or .zshrc
export REACT_EDITOR=code
.bashrc
or .zshrc
(only MacOS)
export REACT_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
OR
install WebStorm command line tools
then set env to shell, like .bashrc
or .zshrc
export REACT_EDITOR=webstorm
Yes! you can also use vim if you want, just set env to shell
export REACT_EDITOR=vim
Stage 1 - Compile Time
Stage 2 - Web React Runtime
[React component] Inspector
Component in react, for listen hotkeys, and request api to dev-server for open IDE.
Specific, when you click a component DOM, the Inspector
will try to obtain its source file info (path/line/column), then request launch-editor api (in stage 3) with absolute file path.
Stage 3 - Dev-server Side
[middleware] setup launchEditorMiddleware
in webpack dev-server (or other dev-server), to open file in IDE according to the request params.
Only need in development mode,and you want to open IDE when click a component element.
Not need in prod mode, or you just want inspect dom without open IDE (set disableLaunchEditor={true}
to Inspector component props)
FAQs
dev-tool for inspect react components and jump to local IDE for component code.
The npm package react-dev-inspector receives a total of 23,961 weekly downloads. As such, react-dev-inspector popularity was classified as popular.
We found that react-dev-inspector demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.