【React-DevTools】MAC版ブラウザ開発者デバッグツール React-DevToolsプラグインインストール

1. ダウンロード

ダウンロードURL: https://github.com/facebook/react-devtools/tree/v3

2.インストール

1. ターミナルを開いた後、「cd」と入力し、react-devtools-3 フォルダーを見つけ、フォルダーをターミナルにドラッグして、react-devtools-3 のルート ディレクトリ パスを取得し、最後に Enter キーを押します。写真に示すように

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

2. 次のコマンドを入力します。
   1. 依存関係をインストールします。

npm install

2. 拡張機能をパッケージ化します。

npm run build:extension:chrome

注: これら 2 つのコマンドは、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 で拡張機能を開きます

ブラウザで拡張機能を開くには 2 つの方法があります。

第一法則

Chrome を開き、ブラウザ コマンドを入力します。

chrome://extensions/

法二

2. 拡張機能を追加する

React-devtools-3/shells/chrome/build/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. 拡張機能を追加する

ブラウザに対応する解凍されたフォルダーを見つけて、上記と同じ手順で追加します。

プロセスはほぼ同じです。