安装react-devtools遇到的一些坑

安装React-devtools之后项目报错

在官网下载了3.4.2的压缩包
下载地址:https://github.com/facebook/react-devtools/releases/tag/3.4.2
之后直接拖到chrome扩展程序中之后直接安装成功了,正高兴之际就被神速打了脸。我的react项目直接报错了?
在这里插入图片描述

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
    at Object../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:8)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

本来是完全没有问题的,遂怀疑新装的扩展程序,于是关掉刚装的扩展程序React-devtools,的确,项目又能正常运行了。
但原因是什么还没搞清楚,还希望有大佬指点🙏

寻求安装React-devtools且不影响项目的方法

又一次失败
下载地址:https://github.com/facebook/react-devtools/tree/v3
这里我下载的是3.6.0的版本 zip
在这里插入图片描述
下载之后解压并安装依赖
在这里插入图片描述
在这里插入图片描述
然后build下生成有unpacked的包,在chrome扩展程序中加载已解压的包,选择这个就好。
然鹅,事情总不是一帆风顺的,即使我安装好了,但在我的项目里依旧显示报上述错误。

非官方下载crx文件

下载地址:https://www.crx4chrome.com/crx/3068/
下载了4.10.0的版本
下载好crx文件直接拖到扩展程序中就安装好了,但是在我自己的项目下显示被拦截
在这里插入图片描述
不死心的我又用脚手架重搞了个react-demo,嗯是好的,看来我项目有问题。在转头回去看我的项目,又没问题了??? 难不成是第一次脚手架初始化的项目被我搞坏了某些配置?尴尬了,问题现在在哪都定位不到了,等有空再研究吧

### 回答1: 1. 首先,你需要在你的项目中安装 React 开发工具。你可以通过运行以下命令来安装它: ``` npm install -g react-devtools ``` 2. 安装完成后,你可以通过以下命令来启动 React 开发工具: ``` react-devtools ``` 3. 如果你使用的是 Chrome 浏览器,你还可以通过以下步骤来安装 React 开发工具的 Chrome 扩展程序: - 打开 Chrome 浏览器,进入 Chrome 网上应用店。 - 在搜索框中输入“React Developer Tools”。 - 点击“添加至 Chrome”按钮,等待安装完成。 - 安装完成后,你可以在 Chrome 浏览器的开发者工具中找到 React 开发工具的选项卡。 4. 安装完成后,你可以在你的 React 应用程序中使用 React 开发工具来调试和分析你的组件。 ### 回答2: React DevToolsReact官方推出的调试工具,它可以帮助开发人员更方便地调试React应用程序。安装React DevTools非常简单,下面是安装步骤。 第一步:准备工作 首先,我们需要在项目中安装React,由于React是通过npm包被安装,因此需要在项目中运行以下命令进行安装: ``` npm install react ``` 接着,我们需要在项目中安装React DevToolsReact DevTools是一个Chrome浏览器的扩展程序,因此需要在Chrome浏览器中进行安装。 第二步:安装React DevToolsChrome浏览器中搜索React DevTools,然后找到它的官方扩展程序页面。在页面中,我们可以看到添加到Chrome的按钮。点击这个按钮,Chrome浏览器就会自动下载并安装React DevTools安装完成后,我们可以在Chrome浏览器的扩展程序中看到React DevTools的图标。这个图标就是我们调试React应用程序的入口。 第三步:调试React应用程序 要使用React DevTools调试React应用程序,我们需要先启动React应用程序。在应用程序中,点击浏览器地址栏左侧的React图标,就可以打开React DevTools面板。 在面板中,我们可以看到所有React组件的结构和状态。我们可以查看组件的props、state、context、refs,也可以在控制台中进行组件的调试。 总之,使用React DevTools可以给React开发带来很大的便利,可以帮助开发人员更好地调试React应用程序。 ### 回答3: React DevToolsReact开发中重要的调试工具之一,它能够帮助开发者快速诊断和调试React代码。在本篇文章中,我们将会提供React DevTools安装教程,帮助大家快速上手。 安装流程: 1. 打开Chrome浏览器 2. 进入Chrome Web Store,搜索React DevTools 3. 安装React DevTools插件 4. 安装完成后,在Chrome浏览器工具栏中找到“React DevTools”图标。 5. 点击“React DevTools”图标,打开开发者工具。 安装完成后,我们可以采用以下步骤测试是否成功安装React DevTools: 1. 打开一个React应用程序,例如一个React页面。 2. 打开Chrome浏览器开发者工具 3. 点击“React”选项卡,在“React DevTools”中可以看到React组件的树形结构,并可以针对每个组件进行诊断和调试。 React DevTools的优点: 1.可视化组件树形结构,快速定位React组件的问题。 2.元素检查器,可快速查看组件的属性值。 3. 支持多种React版本,包括React Native。 4. 支持调试React Hoc、Context、组件性能等问题。 5. 增强了调试效率,提高了工作效率。 总结: React DevTools是一个非常强大的React调试工具,为React开发提供了很大的便利性。我们可以通过以上步骤轻松安装React DevTools,并在React开发中快速诊断和调试React代码。同时,我们也需要注意安全性,只在开发阶段安装使用,不要滥用浏览器插件,避免数据泄露。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值