Chrome如何安装react-developer-tools插件及解决安装后报出的错误：Uncaught TypeError: Cannot read properties of undefined

小半 • 2023年2月12日上午10:30 • 技术随笔 • 阅读 96

安装插件的原因

因为今天安装ant design pro框架（框架下载地址），该框架是用react来写的，因而，需要安装react-developer-tools来调试代码。

如何安装插件

因为下载的是 ant -react框架，需要安装react-developer-tools插件，但该插件只能安装在Chrome中。它有助于我们调试react的某些组件，从而提高我们的开发效率。但它在谷歌商店中，而我们又不能直接下载，但有个地址可供我们下载：https://www.crx4chrome.com/crx/62541/

我把下载好的最新的插件，存储到我的微云当中，微云地址——链接：https://share.weiyun.com/6ir9G9CI 密码：mtkwp7

我们选择一个插件版本下载好后，打开Chrome浏览器 -> 右上角三竖点 -> 更多工具 -> 扩展程序，同时打开开发者模式，如图所示：

我们把下载好的插件拖到空白页中，如图所示：

安装完成后，单机右上角的扩展程序，钉一下该插件，该插件便在工具栏中，如图所示：

如果当前页面没有涉及到react框架，按钮是灰色的，如上图所示。
如果启动我们本地react的项目，按钮是带有小虫子的红色，如图所示。
如果是线上react的项目，按钮是蓝色的，如图所示：

启动项目

我们安装该插件后，使用指令 npm run start启动ant design项目，在Chrome浏览器中输入：http://127.0.0.1:8001。但出现了空白页，打开调试器，发现报如下错误（有可能会报出如下错误）。

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:488:1)
    at ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:17:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:4:1
    at startup:5:1