小记本地安装React Devtools的方法

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

一、下载安装包

在这里插入图片描述
然后我是用vscode打开该项目
在控制台(Terminal)先安装npm
npm install
打开package.json可以看到以下命令

在这里插入图片描述
我们执行npm run build:extension:chrome命令安装谷歌的即可,出现如下图所示提示即表示已经成功

在这里插入图片描述
成功后会生成一个unpacked文件(react-devtools -> shells -> chrome -> build -> unpacked)
然后打开Chrome 扩展程序输入chrome://extensions/,一定要记得打开 开发者模式,点击 加载已解压的扩展程序,选择刚才生成的unpacked文件夹

在这里插入图片描述
即可安装成功,可以看到网站上会出现一个小图标
在这里插入图片描述

二、复制git地址

git clone https://github.com/facebook/react-devtools.git
打开该项目会看到一个空的文件夹,因为作者已经切换到v3分支了
查看README.md 可以看到三个命令,直接跟着这三个命令也行,这里我还是用npm
用淘宝镜像安装快一点npm --registry https://registry.npm.taobao.org install

在这里插入图片描述
首先在控制台上输入git checkout v3,结果如下所示

在这里插入图片描述
接着输入npm --registry https://registry.npm.taobao.org install安装npm
和上面步骤一样再输入npm run build:extension:chrome

在这里插入图片描述
一样的成功后也会生成一个unpacked文件(react-devtools -> shells -> chrome -> build -> unpacked)
然后打开Chrome 扩展程序输入chrome://extensions/,一定要记得打开 开发者模式,点击 加载已解压的扩展程序,选择刚才生成的unpacked文件夹,后续步骤都一致,不再赘述。

最后说一下我遇到的一些问题(react不在调试工具栏出现)

首先确定详细信息的以下两个选项有没有打开,没有的话都打开

在这里插入图片描述
在这里插入图片描述

还是不行,没有出现,那么就关掉浏览器,重启即可(个人经历)
可以用知乎测试一下有没有出现,知乎用了react。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_47541876/article/details/108963437