[React-DevTools] MAC version browser developer debugging tool React-DevTools plug-in installation

1. Download

Download URL: https://github.com/facebook/react-devtools/tree/v3

2. Install

1. After opening the terminal, enter cd, find the react-devtools-3 folder, drag the folder to the terminal to get the root directory path of react-devtools-3, and finally press Enter. As shown in the picture

cd /Users/zengguili/Downloads/react-devtools-3 

2. Enter the command:
   1. Install dependencies:

npm install

2. Package the extension:

npm run build:extension:chrome

Note: These two commands must be used in the root directory of react-devtools-3, otherwise errors will occur.

The following is the operation status of the author's terminal. The following operation status appears, indicating that the installation is successful:

cengguilideMacBook-Pro:~ zengguili$ cd /Users/zengguili/Downloads/react-devtools-3 
cengguilideMacBook-Pro:react-devtools-3 zengguili$ npm install

changed 1 package, and audited 1720 packages in 35s

155 vulnerabilities (12 low, 57 moderate, 60 high, 26 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
cengguilideMacBook-Pro:react-devtools-3 zengguili$ npm run build:extension:chrome

> build:extension:chrome
> node ./shells/chrome/build

✓ Preparing build
✓ Building extension - temporary files in shells/webextension/build/chrome
✓ Unpacking extension - artifacts in shells/chrome/build

The Chrome extension has been built!
You can test this build by running:

# From the react-devtools root directory:
yarn run test:chrome

3. Add extensions to Chrome

1. Open the extension in Chrome

There are two ways to open the extension in your browser:

Law one

Open Chrome and enter the browser command:

chrome://extensions/

law two

2. Add the extension

Open react-devtools-3/shells/chrome/build/unpacked and add the unpacked folder directly.

The situation in the following figure shows that the addition is successful:

4. Installation of React-DevTools in other browsers

1. Download

ditto

2. Install

Find the package.json file in the root directory

Here is part of the code:

"scripts": {
    
    
    "build:extension": "yarn run build:extension:chrome && yarn run build:extension:firefox",
    "build:extension:chrome": "node ./shells/chrome/build",
    "build:extension:firefox": "node ./shells/firefox/build",
    "build:standalone": "cd packages/react-devtools-core && yarn run build",
    "build:example": "cd ./test/example && ./build.sh",
    "deploy": "cd ./shells/theme-preview && ./build.sh && gh-pages -d .",
    "lint": "eslint .",
    "test": "jest",
    "test:chrome": "node ./shells/chrome/test",
    "test:firefox": "node ./shells/firefox/test",
    "test:plain": "cd ./shells/plain && ./build.sh --watch",
    "test:standalone": "cd packages/react-devtools && yarn start",
    "typecheck": "flow check"
  },
  "jest": {
    
    
    "modulePathIgnorePatterns": [
      "<rootDir>/shells"
    ]
  },

You can see the commands for packaging extensions
such as: build:extension:chrome, build:extension:firefoxetc.

Just add the dependency of the running command in front, such as:

npm run build:extension:chrome

2. Add the extension

Find the unpacked folder corresponding to the browser and add it, the same steps as above.

The process is pretty much the same.