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

最新推荐文章于 2024-11-26 02:00:34 发布
原创 最新推荐文章于 2024-11-26 02:00:34 发布 · 836 阅读 · 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文件中特定代码段，然后刷新页面即可。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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 文件
    注释掉框中的内容，不断刷新页面
    在这里插入图片描述
Chrome如何安装react-developer-tools插件及解决安装后报出的错误：Uncaught TypeError: Cannot read properties of undefined
念兮为美
07-06 2609
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)...............
RN（React Native）技术应用中常出现的错误及解决办法
最新发布
在全栈和前端徘徊的程序员
06-22 991
React Native开发常见问题及解决方案摘要：跨平台开发中常遇到网络请求失败（需检查URL和配置权限）、样式错乱（确认CSS属性和布局）、模块缺失（重装依赖和清除缓存）、热重载失效（检查结构和缓存）等问题。原生模块调用、界面异常、构建失败（iOS/Android配置问题）以及状态管理错误也是高频痛点。建议通过官方文档验证功能支持，使用调试工具排查，并确保正确配置原生环境。
at ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
wxiao_xiao_miao的博客
07-04 2467
安装好 react 脚手架，第一次启动 react 项目发现页面不展示，且控制台报错 这是由于我们的谷歌浏览器安装了 react-devtools 扩展程序导致。根据这篇文章查到的解决方案：1. 禁用 react-devtools 扩展程序2. 更换浏览器3. 根据路径找到文件node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js，将下面这行代码注释掉，然后重启项目即可 但是我用第三种方法不管用，项目仍然报错
React DevTools的浏览器详细安装教程及相关错误修改
享白
01-22 2680
今天分享给大家一个自己制作 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 994
从零基于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
十分钟了解vite如何支持react
Yvette Lau的专栏
08-03 3261
丁楠: 微医前端技术部医疗支撑组 专业标题党，人菜瘾大的刀斯林前言vite 是基于浏览器支持 ESM 模块，用以解决大型应用本地开发环境打包、热更新时间久的一套解决方案，目前已支持vu...
Luna：你想要的 React Native 调试工具
weixin_47388410的博客
01-28 1636
Luna 是一款 RN 的应用内调试工具，偏向于解决生产环境调试的痛点。
react的子路由不报错也不展示如何解决?
07-17
如果React的子路由没有报错但也没有展示，可能是以下几个原因导致的： 1. 检查父组件的路由设置：确保父组件的路由设置正确，包含了子组件的路径。例如，使用`<Route>`组件包裹子组件，并设置正确的`path`属性。 2...
React 常见报错及解决办法 (缓慢更新)
qq_41030831的博客
02-18 1083
1.D8 Errors: Program type already present问题 一般是由于项目中多个模块引用了相同的库，但版本号不同引起的冲突 2.Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 依赖未删除完整,可能有link或其他相互依赖 ...
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 Refresh Webpack Plugin 常见问题解决方案
gitblog_00305的博客
11-26 423
React Refresh Webpack Plugin 常见问题解决方案 1. 项目基础介绍 React Refresh Webpack Plugin 是一个实验性的 Webpack 插件，它能够为 React 组件提供“快速刷新”（也称为热重载）功能。该插件通过监控 React 组件的变化，并在不重新加载整个页面的情况下实现组件的即时更新，从而提高开发效率。主要编程语言为 JavaScript...
用vite4+react+ts开发组件库的es版本适配问题
HihiHihaddfsadg的博客
04-14 500
用vite4+react+ts+jest+lerna+storybook搭建的组件库。
React 项目启动在 chrome 上报错 之 Uncaught TypeError: Cannot read property ‘forEach‘ of undefined
weixin_42192113的博客
09-16 603
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 378
再查资料说可以注销代码，代码文件路径为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 1293
at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)问题处理 解决方案： 您安装了 Chrome 扩展程序 [React Developer Tools]。 禁用它，然后重新运行项目。
React踩坑日记React启动后报错TypeError Cannot read properties of undefined (reading ‘forEach‘)
m0_54854317的博客
03-08 1459
前言今天创建新项目运行后又出现这个问题了，之前也出现过，觉得是很正常的情况，不过我今天发现还有许多朋友不知道这个问题的解决方法，特地来记录一下。 话不多说 上图: 这个情况呢是由于你的浏览器安装了React-DevTools扩展程序的原因，安装这个东西是为了方便我们查看React元素和编译之后的一些代码，很多朋友是直接删除了，但是这不就等于是壮士断腕了嘛。解决方法如下: 1.进入项目中按照路径找到相应的文件 /node_modules/@pmmmwh/react-refresh-webpack-plugi
React+antd后台项目踩坑日记
fsjdgfcuvb的博客
08-17 5240
一、在引入less时 ，嵌套的样式失效？ 1，运行npm run eject 将webpack的配置暴露 （如显示无法引入eject，装下eject的依赖，在package.json中暴露 "eject": "react-scripts eject"） 2，在node_modules/react-scripts/config/webpack.config.js修改webpack.config.js的webpack配置文件：由于脚手架默认集成了sass的配置。所以直接模改less就ok了。 3、完整的web
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值