热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

chrome安装reactdevtools开发工具

我开始安装react-devtools的时候百度了一波,都是写的不清不楚,官网又都是英文的也不是完全理解,经过一番折腾出来以后,写个文档记录一下,也可避免新手首次安装走弯路我安装react-devtools的前提是本地安装了git以及node我相信准备学react的同学,应该都有了解使用1.首先打开官网:https:github.comfacebook




我开始安装react-devtools的时候 百度了一波,都是写的不清不楚,官网又都是英文的 也不是完全理解,经过一番折腾出来以后,写个文档记录一下,也可避免新手首次安装走弯路

我安装react-devtools的前提是本地安装了git 以及node 我相信准备学react的同学,应该都有了解使用



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


先已经切换到


chrome安装react-devtools开发工具


 


 


https://github.com/facebook/react-devtools/tree/v3




 

chrome安装react-devtools开发工具







 







 


2.本地打开git bash 然后复制上面的github下载链接

在git中输入:

git clone https://github.com/facebook/react-devtools.git

3.克隆完成以后

cd react-devtools //切换到工程目录

cnpm i //安装依赖

4.安装完成以后切换目录

cd shells/chrome //切换到chrome目录下

5.然后运行node build.js 当前目录下会生成build目录 这个build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包


到这里有两种方式在chrome浏览器中安装react-devtools

方法一:6.1 接着上面的第五步 在git中将目录切换到react-devtools目录下:

运行命令npm run test:chrome

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










 

chrome安装react-devtools开发工具







 












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










 

chrome安装react-devtools开发工具







 







方法二:6.2:打开chrome浏览器 如6.1打开扩展程序

进行如下操作:










 

chrome安装react-devtools开发工具







 







打开开发者模式按钮 选择‘’加载已解压扩展程序‘’选择react-detools目录下的shells->chrome中build目录中的unpacked即可


到此 react-devtools安装成功


转链接:https://www.jianshu.com/p/8afd06135fd5
来源:简书



















推荐阅读
author-avatar
123
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有