mac下安装react开发工具 — React Devtools

浏览器支持情况

  支持Chrome和Firefox浏览器

一、下载

  官网地址：https://github.com/facebook/react-devtools
  下载react-devtools-master文件夹到本地

二、npm安装依赖

  进入到react-devtools-master文件夹，用npm安装依赖。

npm --registry https://registry.npm.taobao.org install

三、打包扩展程序

  安装依赖成功后，用npm打包一份扩展程序。

npm run build:extension:chrome

四、在Chrome安装扩展程序

  1、chrome浏览器输入chrome://extensions/ ,打开chrome的扩展程序页面。
  2、将react-devtools-master -> shells -> chrome -> build -> unpacked ；将unpacked文件夹拖到1中打开的扩展程序页面。
  3、安装成功后检查配置：【详细信息】 — 【允许访问文件网址】开启

1
2

五、使用

  1、打开一个react项目
  2、首次一定要通过右上角—更多工具（L）—开发者工具（D） ,后期可直接右键浏览器，点击“检查”即可。
  注意：首次第一要打开开发者工具哦，直接右键“检查”会不出现react标识的。

打开开发者工具
  3、点击开发工具中的React即可看到效果啦。
效果图