chrome安装react-devtools开发工具

最近想学一下react,在谷歌上面安装react-devtools时看了一些博客,说的比较详细的没有几个,后面在博客园看到一篇有详细步骤+截图的博客。

https://www.cnblogs.com/Ewarm/p/12010716.html

开始

安装react-devtools前必须保证本地已安装好Git和node.js,至于Git和node.js的安装方式请自行百度!

1.首先打开官网:https://github.com/facebook/react-devtools

滑至底部,在 README.md下点击v3 branch

 

2.直接下载 v3 ZIP安装包,这边试过直接复制上图的链接使用git进行clone会下不到v3的版本。


3.下载完成以后
//切换到工程目录

cd react-devtools-3


//安装依赖 

cnpm i


4.安装完成后切换目录

//切换到chrome目录下

cd shells/chrome


5.生成扩展程序包

在shells/chrome 目录运行node build.js。

运行完成后在该目录下会生成build目录,这个build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包。

6.在chrome浏览器中安装react-devtools(这边有两种安装方式)
方法1:接着上面的第五步,将目录切换到react-devtools-3目录下:
运行命令npm run test:chrome


此时会自动安装react-devtools 并打开chrome浏览器

在浏览器右上角的工具栏里打开->更多工具->扩展程序里就可以看到我们安装成功了

 

方法二2:打开chrome浏览器 并打开扩展程序,在扩展程序中开启开发者模式,点击加载已解压的扩展程序,将在shells/chrome/build目录下生成的unpacked安装包进行加载即可。

 

发布了3 篇原创文章 · 获赞 2 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览