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即可看到效果啦。
效果图

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容