安装React Devtools调试工具

    在进行React开发的过程中,React提供了官方的浏览器扩展插件React Devtools调试工具,其下载地址是https://fb.me/react-devtools,但由于某些原因,前面的下载链接我自始至终都没有打开过,所以只能另想办法了。

1、从GitHub中将react-devtools项目源代码拷贝到本地
  git clone [email protected]:facebook/react-devtools.git
2、安装项目依赖
  npm install
3、查找项目命令

从Package.json文件中的Script下查找以下命令:

  "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"
  }
4、打包项目,生成扩展程序

这里以Chrome浏览器为例:

    npm run build:extension:chrome

将会在项目目录下,生成一个shells/chrome/build/unpacked目录,这就是扩展程序的部署包,将其拷贝到容易找到的地方。

5、将扩展程序安装到浏览器中,并开始React调试

从浏览器中地址栏中打开地址chrome://extensions/,点击“加载已解压的扩展程序”加载完成之后,即安装成功。

6、注意事项

千万不要删除正在加载使用的shells/chrome/build/unpacked文件夹,否则需要重新安装。

你可能感兴趣的:(安装React Devtools调试工具)