Solving Component Lookup Pain Points in Large React Projects with Chrome Extensions and react-dev-inspector

Pain Point

Our main project contains over 2800 components across dozens of routes, making it difficult for new or existing developers to locate the source code for a given component.

Solution Overview

Option 1: Chrome React Developer Tools

Provides a Components panel that can open the source in VSCode via a custom protocol. Advantages: no code changes, can view component props. Disadvantages: complex navigation path and instability in large projects.

Option 2: Chrome plugins (React Inspector, locatorjs)

Install the plugin and trigger with a shortcut to open the component. Advantages: no code changes, simple operation. Disadvantages: relies on React's _debugSource property; may fail for certain component patterns.

Option 3: react-dev-inspector npm package

Offers fast, reliable component‑to‑editor linking but requires code integration.

Installation

npm i -D @react-dev-inspector/babel-plugin react-dev-inspector

.babelrc configuration

{ "plugins": ["@react-dev-inspector/babel-plugin"] }

Middleware setup (schema vs service)

Schema launch is simple; service launch uses react‑dev‑utils launchEditor.js .

Webpack DefinePlugin to expose CWD

var webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.CWD': JSON.stringify(process.cwd())
    })
  ]
};

Custom Inspector component

import React from 'react';
import { Inspector } from 'react-dev-inspector';
import { gotoVSCode, gotoWebStorm } from 'react-dev-inspector/lib/Inspector/utils/editor';

const InspectorPlugin = () => {
  if (process.env.NODE_ENV === 'development') {
    return (
      <Inspector onInspectElement={(codeInfo) => {
        if (codeInfo.absolutePath === undefined) {
          codeInfo.absolutePath = `${process.env.CWD}/${codeInfo.relativePath}`;
          delete codeInfo.relativePath;
        }
        gotoVSCode(codeInfo);
      }} />
    );
  }
  return null;
};
export default InspectorPlugin;

Middleware integration

const { launchEditorMiddleware } = require('@react-dev-inspector/middleware');
// webpack 5
module.exports = {
  devServer: {
    setupMiddlewares(middlewares) {
      middlewares.unshift(launchEditorMiddleware);
      return middlewares;
    }
  }
};
// webpack 4
module.exports = {
  devServer: {
    before(app) {
      app.use(launchEditorMiddleware);
    }
  }
};

Advantages: fast launch for any node, resolves drawbacks of previous options. Disadvantages: requires integration and may increase build time.

Download Links

locatorjs: https://chrome.google.com/webstore/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi

React Inspector: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh

Reference

react-dev-inspector repository: https://github.com/zthxxx/react-dev-inspector