0%

react-dev-inspector, an Alternative to click-to-react-component

September 4, 2025

React

1. Installation

We install by

yarn add react-dev-inspector

Unlike click-to-react-component, react-dev-inspector supports older version of react including react version 17.

Next in the entrypoint of the application we add:

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

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

ReactDOM.render(
  <>
    <InspectorWrapper
      keys={['control', 'shift', 'c']}
    >
      <Provider store={store}>
        <BrowserRouter basename={process.env.PUBLIC_URL + "/"}>
          <App />
        </BrowserRouter>
      </Provider>
    </InspectorWrapper>
  </>,

  document.getElementById("root")
);

2. Result

On clicking, our IDE will jump to the img component inside of ProfileCard.tsx.