react如何安装调试工具，如何解决报错

最新推荐文章于 2025-12-03 20:04:24 发布
原创 最新推荐文章于 2025-12-03 20:04:24 发布 · 862 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react

这篇博客介绍了如何在Chrome浏览器中安装react-devtools扩展程序，以及遇到`Uncaught TypeError: Cannot read property 'forEach' of undefined`错误时的解决方法。在安装过程中，你需要进入Chrome扩展程序设置，开启开发者模式并加载已解压的扩展程序。当遇到运行错误时，需要注释掉/react-refresh-webpack-plugin/client/ReactRefreshEntry.js文件中特定代码段，然后刷新页面即可。

react-devtools 安装（已上传到资源）

  • 1 打开Chrome输入 chrome://extensions/ 进入扩展程序设置页面
  • 2 开启 开发者模式
  • 3 加载已解压的扩展程序 选择第4步的unpacked目录， 确认安装即可
  • ## 问题
  • Uncaught TypeError: Cannot read property ‘forEach’ of undefined
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
    在这里插入图片描述
    解决办法：找到/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js 文件
    注释掉框中的内容，不断刷新页面
    在这里插入图片描述
分析C++软件问题的实用软件与高效工具实战案例集锦汇总
dvlinker的技术专栏
06-26 16万+
C++软件分析工具案例分析集锦！根据近几年C++软件异常排查的项目实践，详细地讲述如何使用PE工具、Dependency Walker、GDIView、Process Explorer、Process Monitor、API Monitor、Clumsy、DebugDiag、Windbg、IDA Pro等常用分析工具，以及如何使用这些工具去巧妙地分析和解决日常工作中遇到的问题，有很强的实战参考价值！
Chrome如何安装react-developer-tools插件及解决安装后报出的错误：Uncaught TypeError: Cannot read properties of undefined
念兮为美
07-06 2665
Chrome如何安装react-developer-tools插件及解决安装后报出的错误：Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')——./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:17:1)...............
at ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
wxiao_xiao_miao的博客
07-04 2723
安装好 react 脚手架，第一次启动 react 项目发现页面不展示，且控制台报错 这是由于我们的谷歌浏览器安装了 react-devtools 扩展程序导致。根据这篇文章查到的解决方案：1. 禁用 react-devtools 扩展程序2. 更换浏览器3. 根据路径找到文件node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js，将下面这行代码注释掉，然后重启项目即可 但是我用第三种方法不管用，项目仍然报错
React DevTools的浏览器详细安装教程及相关错误修改
享白
01-22 2765
今天分享给大家一个自己制作 React-devtools 小方法，制作完毕可以直接安装到Chrome中使用。 React DevTools安装： Github 地址：react-devtoolsGitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, rev
从0搭建一个基于webpack的react项目【实战篇】
qq_16483541的博客
08-21 1015
从零基于webpack搭建一个react项目，适合刚学习webpack的新手学习使用
React踩坑日记:React启动后报错TypeError: Cannot read properties of undefined (reading ‘forEach‘)
热门推荐
顾风的博客
10-22 2万+
前言今天创建新项目运行后又出现这个问题了，之前也出现过，觉得是很正常的情况，不过我今天发现还有许多朋友不知道这个问题的解决方法，特地来记录一下。 话不多说 上图: 这个情况呢是由于你的浏览器安装了React-DevTools扩展程序的原因，安装这个东西是为了方便我们查看React元素和编译之后的一些代码，很多朋友是直接删除了，但是这不就等于是壮士断腕了嘛。解决方法如下: 1.进入项目中按照路径找到相应的文件 /node_modules/@pmmmwh/react-refresh-webpack-plug
前端如何根据 Lighthouse 分析优化页面性能
油墨香^-^的博客
03-15 891
Lighthouse是一款开源的Web应用质量评估工具，通过性能、可访问性、最佳实践、SEO和PWA五大核心模块提供全面分析。文章详细介绍了三种使用方式：Chrome开发者工具（适合新手）、Node.js命令行（适合自动化）和LighthouseCI（团队协作），并深入解析了LCP、FID、CLS等关键性能指标。针对常见性能问题，提供了图片优化、JS/CSS优化、服务器配置等具体解决方案，并建立了从测试到验证的系统化优化流程。最后强调了持续监控的重要性，建议设置性能预算并采用自动化监控方案，以确保持续的性能
react的子路由不报错也不展示如何解决?
07-17
如果React的子路由没有报错但也没有展示，可能是以下几个原因导致的： 1. 检查父组件的路由设置：确保父组件的路由设置正确，包含了子组件的路径。例如，使用`<Route>`组件包裹子组件，并设置正确的`path`属性。 2...
react本地调试报错弹出整个屏幕，，怎么关闭
06-22
确保已安装最新版本的React Developer Tools浏览器扩展。通过该工具可以检查是否有特定设置能够控制错误提示的显示方式[^1]。如果工具中存在相关选项，则可以通过修改这些设置来减少或关闭全屏错误提示。 #### 方法...
【error】 react 控制台报错Invalid hook call
chirp_CQ的博客
11-06 694
导致这个的原因多半都是因为不同版本的react 导致的，我也遇到了，我在多次尝试后发现多半是因为我两个前端项目都同时在本地打开的情况下，webstorm识别到了两个项目的不同react版本。暂时的解决办法是将node_modules 给删除掉，然后重新执行。我的前端react + ant-design-pro项目能正常启动。，这将是对我很大的鼓励！若是对你有所帮助的话，希望能获得你的。
customize-cra-react-refresh:提供一种简单，简洁的方法，使用custom-cra将react-refresh集成到您的create-react-app中
03-21
描述 提供一种简单，简便的方法，使用 和将react-refresh集成到您的create-react-app 。 安装 安装依赖项 npm install -D react-app-rewired customize-cra customize-cra-react-refresh 创建或更新您的config-overrides.js const { override } = require ( "customize-cra" ) ; const { addReactRefresh } = require ( "customize-cra-react-refresh" ) ; /* config-overrides.js */ module . exports = override ( addReactRefresh ( ) ) ; “翻转”现有的对npm脚本中的react-scrip
react项目启动报错:Uncaught TypeError: Cannot read property ‘forEach‘ of undefined
feinifi的博客
01-10 8467
如题，react项目启动报错，具体信息，如下所示： 这个问题是因为浏览器安装了react-devtools扩展程序导致的，很多人的解决办法就是直接禁用react-devtools，我觉着也还行吧，但是就是感觉不是很好，我们安装这个玩意不就是为了方便查看react元素与编译之后的代码的么？这种办法似乎有点壮士断腕，我直接不用你了。 我个人根据报错堆栈信息，找到node_modules/@pmmmwh/react-refresh-webpack-plugin/cl...
十分钟了解vite如何支持react
Yvette Lau的专栏
08-03 3308
丁楠: 微医前端技术部医疗支撑组 专业标题党，人菜瘾大的刀斯林前言vite 是基于浏览器支持 ESM 模块，用以解决大型应用本地开发环境打包、热更新时间久的一套解决方案，目前已支持vu...
React Refresh Webpack Plugin 常见问题解决方案
最新发布
gitblog_00305的博客
12-03 526
React Refresh Webpack Plugin 是一个实验性的 Webpack 插件，它能够为 React 组件提供“快速刷新”（也称为热重载）功能。该插件通过监控 React 组件的变化，并在不重新加载整个页面的情况下实现组件的即时更新，从而提高开发效率。主要编程语言为 JavaScript。 ## 2. 新手常见问题及解决步骤 ### 问题一：项目依赖版本不兼容 **问题描述：
用vite4+react+ts开发组件库的es版本适配问题
HihiHihaddfsadg的博客
04-14 558
用vite4+react+ts+jest+lerna+storybook搭建的组件库。
React 项目启动在 chrome 上报错 之 Uncaught TypeError: Cannot read property ‘forEach‘ of undefined
weixin_42192113的博客
09-16 653
React 项目启动报如下错误： 通过查阅相关博客知道，报错原因为浏览器安装了react-devtools扩展程序导致的。 解决方法一、通过报错信息得知具体的报错地点，注释相关代码 从报错信息可以看到，报错是否node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js 中发出，注释相关代码，如下 const safeThis = require('./utils/safeThis'); if (process
react 创建项目后 npm start 启动后报错 踩坑记录一下
m0_58185022的博客
04-02 397
再查资料说可以注销代码，代码文件路径为react-demo\node_modules\@pmmmwh\react-refresh-webpack-plugin\client\ReactRefreshEntry.js。刚刚开始不知道是什么原因，查了很久资料，感觉方向不对，突然想到可能是由于自己安装了Developer Tools的问题，我把扩展程序关了，项目无报错。看到博主说版本不对，就按照博主操作了，我用的也是react18， Developer Tools需要更换到版本4，然后到这个地址，去下载。
at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
null
09-02 1338
at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)问题处理 解决方案： 您安装了 Chrome 扩展程序 [React Developer Tools]。 禁用它，然后重新运行项目。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值