chrome 安装 react-devtools 详细教程

本文针对无科学上网环境下,react-devtools 的 安装。(有科学上网环境 可直接在chrome 商店上 下载)

 一. 下载安装包

devTools 扩展安装包

注意: 该地址 就是 扩展安装包无需 npm install 安装依赖 , node.js build 等步骤 ,开箱即用

如果有小伙伴 安装速度太慢, 笔者这里提供 3.4.2版本 (2023年4月 最新)

链接:百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速,支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com/s/1f6Pt2GrCnKoZq5-ulImonA?pwd=0823

提取码:0823

二. 添加扩展程序

下载后的zip解压到自己的目标文件夹,然后打开Chrome浏览器(以Chrome为例)的扩展程序,==>加载已解压的扩展程序chrome://extensions/,如下图

 

如下图 ,安装扩展后,可能 显示错误 ,这里先不予处理

 

三.  解决报错

在chrome浏览器, 启动 无报错 项目, 发现项目报错

react-refresh-runtime.development.js:488 
Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

解决办法: 

a. 将项目的 node_modules 删除,重新 npm i 安装项目依赖,先不要 npm start 启动项目(重点)

注意:这里 不可以 不删除 node_modules  ,而直接修改 下面提到的  ReactRefreshEntry.js 文件, 这样操作是无效的。

b. 找到项目中依赖文件夹下的 node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js 目录,打开此文件,注释以下这行代码:

RefreshRuntime.injectIntoGlobalHook(safeThis);

c. npm start 

启动 devTools 成功! 

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答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代码。同时,我们也需要注意安全性,只在开发阶段安装使用,不要滥用浏览器插件,避免数据泄露。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值