打怪升级系列之react-devtools调试工具的安装

575 阅读1分钟

刚入坑 react 不久,因为有vue的基础,所以学起来还算顺利吧! 今天就跟和我一样刚学react的小萌新分享一下react-devtools调试工具的安装吧

1.先进入github下载zip包,下面是地址,点击进去下载到本地

github.com/facebook/re…

2.解压之后 我们直接进入根目录下安装依赖

npm install 或者 yarn install ......

根据你的喜好来就行

3.安装完成之后,我们进入到/shell/chrome 目录下

image.png

image.png

运行命令 node build.js

最后会在 build目录下面生成一个unpacked的文件夹,这就是友友们需要的文件了

image.png

4.友友们打开chrome的扩展程序管理,直接给我把unpacked拖进去,不要犹豫,犹豫就会浪费你三秒钟时间,发现我说的是对的👀

最后说一点,也是我找了半天文献才解决的

当我们的react-devtools开启的时候,我们的react项目就会在浏览器上空屏报错

image.png

这个时候我们去node_modules下找到文件,修改一下代码

image.png

image.png

目前只知道这种方法奏效,还望友友们帮我扩展扩展! 哪一步出问题了欢迎留言,我们一起解决。✌