Chrome 安装 react-devtools 调试工具

在 Chrome 浏览器中安装 react-devtools 调试工具有两种方案:

方案一:访问谷歌扩展程序商店直接安装(不做赘述)。

优点:操作简单方便。

缺点:国内网络可能无法直接访问谷歌扩展程序商店。

方案二:直接在 github 仓库中克隆 react-devtools。

优点:不需要访问谷歌扩展程序商店,适合国内用户

缺点:没有方案一中操作简单

本文重点介绍方案二中的每一个步骤:

步骤1:直接访问 github 仓库地址:https://github.com/facebook/react-devtools/tree/v3

步骤2:通过 npm clone <url> 克隆

例如:

a、在你的电脑桌面上创建一个文件夹:devtools。

b、打开 cmd,cd 到 devtools 文件夹中 (在 window 系统中通过 cmd 执行命令,在 mac 系统中使用 终端 执行命令)

c、执行命令 git clone https://github.com/facebook/react-devtools.git

步骤3:进入到克隆到本地的项目根目录中,可能只能看到以下文件

步骤4:通过 git checkout v3 切换到 v3 版本上,并执行 npm install 或 cnpm install

步骤5:在 cmd  中 cd 到 上图中的 shells 文件夹下的 chrome 文件夹中执行命令 node build.js

步骤6:进入上图中的 build 夹中 unpacked 文件夹就是我们需要的

步骤七:将上图中的 unpacked 文件夹拷贝到你想要拷贝到的位置,打开 chrome 浏览器 -> [设置] -> [更多工具] -> [扩展程序] -> [开发者模式]

步骤八:上图中选择 unpacked 问价夹后会看到下图中的扩展程序后重启浏览器

步骤九:重启浏览器后即安装成功,赶快创建一个 Create React App 试一试吧

参考网址: 

主要参考网址:https://www.jianshu.com/p/8afd06135fd5

住要参考网址:https://www.cnblogs.com/shenwh/p/12067029.html

更加简单粗暴的方法:https://blog.csdn.net/newway007/article/details/102911629

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容