浏览器支持情况
支持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即可看到效果啦。
效果图