The React project has a plugin called react-dev-inspector. The React-dev-inspector is used to fix a bug in a live project that requires you to go through the code all the time if you’re not familiar with the project.

Github address for the project.

Configure the loader

The loader configuration in Webpack is used to obtain the location of the code during packaging and record it in the HTML attribute of the element. Basically, there are several contents: the file location of the code, the number of lines of the code, and the number of columns of the code

The generated element has the following structure:

<div
  data-inspector-line="11"
  data-inspector-column="4"
  data-inspector-relative-path="src/components/Slogan/Slogan.tsx"
  class="css-1f15bld-Description e1vquvfb0"
>
  <p
    data-inspector-line="44"
    data-inspector-column="10"
    data-inspector-relative-path="src/layouts/index.tsx"
  >
    Inspect react components and click will jump to local IDE to view component
    code.
  </p>
</div>;
Copy the code

The configuration in Webpack is as follows:

module: {
    rules: [{test: /\.[jt]sx$/,
        exclude: [
          /node_modules/./file-you-want-exclude/,].use: [{loader: 'react-dev-inspector/plugins/webpack/inspector-loader'.options: [{
              // loader options type and docs see below
              exclude: [
                'xxx-file-will-be-exclude'./regexp-to-match-file /,].babelPlugins: [].babelOptions: {},}],},],},Copy the code

The loader should be configured after babel-loader. This means that babel-Loader must compile into the AST before it can be recognized and converted by the loader.

Configure plugins

The above is only the relative location of the code, but also need to get the absolute path, here needs to configure the project working directory, as follows:

import { DefinePlugin } from 'webpack'
plugins: [
    new DefinePlugin({
      'process.env.PWD': JSON.stringify(process.cwd()),
    }),
  ],
Copy the code

Configuration webpackDevServer

You need to listen locally to see if the relevant component is clicked, opening the code location on the server side

import { createLaunchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'
devServer: {
    before: (app) = > {
      app.use(createLaunchEditorMiddleware())
    },
  },
Copy the code

The react runtime

The pages displayed in the GIF need to have a mask layer, so runtime code is required

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 below
      keys={['control', 'shift', 'command', 'c']}
      disableLaunchEditor={false}
      onHoverElement={(params: InspectParams) = > {}}
      onClickElement={(params: InspectParams) => {}}
    >
     <YourComponent>.</YourComponent>
    </InspectorWrapper>)}Copy the code

Configuration editor

At this point, it is not enough to open the editor and navigate to the specific location, since the editor cannot be mobilized in the environment, just do the following in vscode.

  1. Open the vscode
  2. According to thectrl + shift + p, the inputshell command

Select install ‘code’ Command in PATH

you can use window.__REACT_DEV_INSPECTOR_TOGGLE__() to toggle inspector. You can also use this method to switch debug mode