【React-DevTools】MAC 版 浏览器开发者调试工具 React-DevTools插件的安装

1. 下载

下载网址：https://github.com/facebook/react-devtools/tree/v3

2. 安装

1. 打开终端后输入cd，再找到react-devtools-3文件夹，拖运文件夹到终端得到react-devtools-3根目录路径，最后回车。如图中

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

2. 输入命令：
   1.安装依赖：

npm install

2.打包扩展程序：

npm run build:extension:chrome

注意：这两个命令一定要在react-devtools-3的根目录下使用，不然会出现错误。

以下是作者的终端运行情况，出现以下的运行情况，说明安装成功：

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. 往Chrome中添加扩展程序

1. 打开Chrome中的扩展程序

在浏览器中打开扩展程序的方式有两种：

法一

打开Chrome，输入浏览器命令：

chrome://extensions/

法二

2. 添加扩展程序

打开react-devtools-3/shells/chrome/build/unpacked直接添加unpacked文件夹。

出现如下图中的情况说明添加成功：

4. React-DevTools在其他浏览器中的安装

1. 下载

同上

2. 安装

在根目录下找到package.json文件

以下是部分代码：

"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"
    ]
  },

可以看到打包扩展程序的命令
如：build:extension:chrome、build:extension:firefox等

在前面加上运行命令的依赖即可，如：

npm run build:extension:chrome

2. 添加扩展程序

找到对应当浏览器的unpacked文件夹添加即可，和上面一样的步骤。

流程都差不多。