React DevTools的安装与安装后项目报错解决

最新推荐文章于 2024-09-20 19:42:32 发布
最新推荐文章于 2024-09-20 19:42:32 发布
阅读量523 收藏 1
点赞数
文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41886277/article/details/132885086
版权
本文详细指导如何安装ReactDevTools，包括从GitHub下载、依赖安装、构建插件，以及遇到Cannotreadpropertiesofundefined错误时的非官方CRX文件安装方法。解决谷歌浏览器扩展问题的步骤也做了说明。
摘要由CSDN通过智能技术生成

react DevTools的安装

1. 进入官网https://github.com/facebook/react-devtools/tree/v3，Download Zip

2. 解压后进入react-devtools-3目录，cnpm i 安装依赖

3. 再进入到react-devtools-3/shells/chrome目录下，执行 node build.js

4. 运行成功后会在当前目录生成一个build文件夹，build文件夹下的unpacked文件夹即为我们所需要的插件

5. 打开Chrome浏览器-扩展程序，将unpacked文件夹拖入，安装成功

打开调试工具后发现谷歌浏览器报错：

Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘)，项目不能正常运行

1.非官方下载crx文件，下载地址：​​​​​​Download React Developer Tools 4.24.3 CRX File for Chrome - Crx4Chrome

 

打开谷歌浏览器，工具-拓展程序，将下载好crx文件直接拖到扩展程序中就安装好了

两篇原文链接

 React Devtools安装教程 - 简书

关于react出现Cannot read properties of undefined (reading ‘forEach‘)的解决方案。_唐家小妹的博客-CSDN博客

枳在淮北
关注
Chrome如何安装react-developer-tools插件及解决安装后报出的错误：Uncaught TypeError: Cannot read properties of undefined
念兮为美
07-06 2506
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)...............
react-devtool-4.4.0.crx
03-05
不用下载源码，不用编译，不用敲命令。 直接拖拽到chrome即可使用， 亲测可正常使用。 插件详细情况描述： React Developer Tools 4.4.0 (1/3/2020) Adds React debugging tools to the Chrome Developer Tools. Created from revision f749045a5 on 1/3/2020. ID：fmkadmapgofadopljbjfkapdkoienihi
React DevTools安装，报错：error An unexpected error occurred、Cannot read properties of undefined
星辰迷上大海的博客
01-11 568
报错：error An unexpected error occurred、Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
Chrome 安装 React DevTools 详细教程
最新发布
gitblog_06538的博客
09-20 461
Chrome 安装 React DevTools 详细教程 chrome安装react-devtools详细教程 项目地址: https://gitcode.com/Resource-Bundle-Collection/795e...
React-DevTools开发者工具安装
席木木的博客
10-03 8097
React开发者工具最简单的安装方式自然是科学上网，通过Google Chrome浏览器访问应用商店安装了。以下介绍另一种安装方式：基于 react-devtools的GitHub项目源码编译进行插件安装。
react调试工具react -devtools的安装
马娟的博客
10-11 4204
    前言     react-devtools是什么？         react-devtools是一款由 facebook 开发的有用的 Chrome浏览器扩展。通过它我们可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。 安装React Devtools有两种方法： 方法一：chrome商店上直接下载（前提是该电脑已经翻墙）。     ...
react-devtools的安装
qq_36934775的博客
06-29 215
完整的安装方法 git clone https://github.com/facebook/react-devtools.git cd react-devtools //切换到工程目录 git checkout v3 // 切换到v3分支 cnpm install // 安装依赖 npm run build:extension:chrome //安装依赖成功后，打包一份扩展程序 在浏览器上打开chrome://extensions/ 点击 “开发者模式” 点击“加载已解压的扩展程序” 选择 reac
react项目搭建和react devtools安装
DoNow
05-05 1074
react安装 1、下载node.js node.js下载地址：https://nodejs.org/en/ node.js下载 安装成功后，进入cmd命令行，输入 node -v 出现版本号，表示安装成功
mac从零开始安装react-devtools
LiaoJIE210的博客
09-06 639
安装react-devtools
google浏览器添加react-devtools扩展程序的方法
Q_004的博客
11-27 1273
安装react-devTools调试工具步骤 1 ，先去github上下载文件到本地，下载压缩包（下载到自己能找到的地方） 2，解压文件，解压好之后通过命令进入react-devtools-3文件夹（下载的压缩包就是这个名字） 然后用npm 安装依赖 npm --registry https://registry.npm.taobao.org install 我安装的时候报错了...
如何实现一个React全家桶项目（附完整教程及代码）
06-26 2541
如何实现一个React全家桶项目（附完整教程及代码）
React devtools最新
01-11
eact React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React-devtools-3.6.0.zip（最新版chrome的React插件）
07-28
chrome谷歌浏览器，打开空白页，地址栏chrome://extensions/打开扩展程序页面（开发者模式），将下载的React-devtools-3.6.0.zip拖拽到该页面，安装成功。
安装React developer tools
m0_67388537的博客
07-27 746
react调试工具,像vue-devtool一样,可以方便的追踪调试state,props等实时状态.说明: 当前版本不推荐,在react-design-pro项目中会直接报错.
安装React Devtools调试工具
luluan_lin的博客
10-31 546
安装React Devtools调试工具的步骤： 去git上下载react-devtools文件到本地，react-devtools 用npm安装依赖 cd ~/Downloads/react-devtools-3 npm install 安装依赖成功后，打包一份扩展程序 npm run build:extension:chrome 打包完成之后，~/Downloads/react-dev...
如何安装React Developer Tools（超简单）
庸人方自扰，自在就好
07-12 1329
vue-devtools的安装有三种方法，第一种是通过谷歌应用商店进行安装，第二种是手动安装，第三种是直接下载使用网友分享出来的资源：打开谷歌的更多工具–扩展程序，打开左上角的“主菜单”，点击下面的“打开Chrome网上应用店”，这个应用商店是需要番强的，一般同学是打不开的！能打开的同学搜索React，把第一个扩展程序添加至Chrome即可。下载链接：https://download.csdn.net/download/weixin_43804496/86037025下载压缩包，然后解压，打开谷歌浏览器的扩
【react devtools】react devtools安装后导致项目报错解决办法
马云
04-25 3459
原文链接：https://www.cnblogs.com/wyq1995/p/14772650.html 安装开发者插件导致报错 解决办法 卸载该插件，重新下载： react devtools下载地址 下载完了之后将crx后缀改为zip，然后将这个zip拖到谷歌浏览器扩展程序那里就行了 ...
启用React-devtools后，项目报错
梁什么鸭“的博客
10-05 725
我安装的是 最新版本的 v3 分支上的 react-devtools，根据官方文档一系列操作下来安装好了，然后运行项目报一下错误： 但是之前项目是正常运行的，于是上网搜索，发现大多数都是说直接禁用掉 react-devtools 这个插件，就无语，那我还安装它干啥？？嫌内存太多？？ 于是我又看了眼报错信息，然后根据如下报错信息 按照它的路径把我项目中对用的这段代码注释掉，然后重新 yarn start，就没有报错了 网上看了下，说这个是版本的原因，说之前的旧版本没有这个问题。 就酱，拜！ ...
react-devtools
软工二班秦同学的博客
10-07 771
学会使用react-devtools调试工具，在浏览器中对react代码进行调试
react devtools安装后vuedevtool打不开了
12-06
当你安装了React DevTools之后，Vue ...综上所述，通过确保插件的最新版本，启用/禁用插件，卸载/重新安装插件以及使用不同的浏览器或开发者工具，你应该能够解决React DevTools安装后Vue DevTool无法打开的问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值