chrome 安装 react-devtools 详细教程

本文针对无科学上网环境下，react-devtools 的 安装。（有科学上网环境 可直接在chrome 商店上 下载）

 一. 下载安装包

devTools 扩展安装包

注意： 该地址 就是 扩展安装包 ，无需 npm install 安装依赖 ， node.js build 等步骤 ，开箱即用

如果有小伙伴 安装速度太慢， 笔者这里提供 3.4.2版本 （2023年4月 最新）

链接：百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固，支持教育网加速，支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com/s/1f6Pt2GrCnKoZq5-ulImonA?pwd=0823

提取码：0823

二. 添加扩展程序

下载后的zip解压到自己的目标文件夹，然后打开Chrome浏览器（以Chrome为例）的扩展程序，==>加载已解压的扩展程序chrome://extensions/，如下图

​

如下图 ，安装扩展后，可能 显示错误 ，这里先不予处理

扫描二维码关注公众号，回复： 16208968 查看本文章

​

 ​

三.  解决报错

在chrome浏览器， 启动 无报错 项目， 发现项目报错

​

react-refresh-runtime.development.js:488 
Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

解决办法： 

a. 将项目的 node_modules 删除，重新 npm i 安装项目依赖，先不要 npm start 启动项目(重点)

注意：这里 不可以 不删除 node_modules  ，而直接修改 下面提到的  ReactRefreshEntry.js 文件， 这样操作是无效的。

b. 找到项目中依赖文件夹下的 node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js 目录，打开此文件，注释以下这行代码：

RefreshRuntime.injectIntoGlobalHook(safeThis);

c. npm start 

启动 devTools 成功！