微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

如何在chrome中安装react开发工具

青灯夜游
发布： 2020-12-18 11:56:28
原创
3283人浏览过
安装方法：1、在git中下载react-devtools文件并解压；2、打开cmd窗口，使用cd命令进入react-devtools目录；3、使用npm工具安装依赖并打包扩展程序；4、在chrome的“扩展程序”页面中添加扩展程序即可。

如何在chrome中安装react开发工具

本教程操作环境：windows7系统、chrome87&&react16版本，该方法适用于所有品牌电脑。

相关教程推荐：React视频教程

在chrome中安装react开发工具----react-devtools插件的方法

1.git 下载react-devtools.zip  https://github.com/facebook/react-devtools/tree/v3

2.解压 打开 进入react-devtools文件夹

3.在文件夹内右击 选择

或者cmd运行，使用cd命令进入react-devtools文件   （注意 切换为自己的实际路径）

4.进入到react-devtools文件夹后，安装依赖 等待一会 时间比较长

　　npm --registry https://registry.npm.taobao.org install

知我AI·PC客户端
知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

知我AI·PC客户端 35
查看详情 知我AI·PC客户端

5.安装完成 打包一份扩展程序

npm run build:extension:chrome

出现以下信息打包成功

成功生成react-devtools-3 -> shells -> chrome -> build -> unpacked文件夹

6.打开chrome 地址栏输入chrome://extensions/打开扩展程序，选择-->加载已解压的扩展程序,打开的文件夹选择自己相应路径下的unpacked文件夹即可

7.添加成功

更多编程相关知识，请访问：编程入门！！

以上就是如何在chrome中安装react开发工具的详细内容，更多请关注php中文网其它相关文章！

相关标签：
chrome npm github git https

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：React Fabric是什么 下一篇：基于jquery开发的UI框架有哪些
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
React/JavaScript中处理表单输入ID与数组对象ID的类型匹配问题 本教程旨在解决React/JavaScript开发中，当从表单获取ID并与数组中现有对象ID进行比对时，因数据类型不一致（字符串与数字）导致的匹配失败问题。文章将深入分析input元素值始终为字符串的特性，即使type="number"也如此，并提供使用parseInt()进行类型转换的解决方案，确保ID比对的准确性，附带完整的React示例代码。
2025-11-18 16:34:02
354
JavaScript深度嵌套对象值更新：Lodash _.merge 实战指南 本文深入探讨了在JavaScript中高效更新深度嵌套对象值的策略。针对原生方法在处理复杂结构时的局限性，文章详细介绍了如何利用流行的工具库Lodash的_.merge()方法。通过具体的代码示例，演示了可变（原地修改）和不可变（创建新对象）两种更新模式，并提供了选择合适策略的专业指导，旨在帮助开发者更灵活、安全地管理复杂数据状态。
2025-11-18 16:32:10
513
JavaScript防抖节流_用户输入优化与性能提升 防抖指事件触发后延迟执行，期间若再次触发则重新计时，适用于搜索联想等场景；节流指固定时间间隔内只执行一次，保证周期性响应，适用于滚动加载等持续行为。两者均通过限制函数执行频率提升性能，区别在于防抖关注最后一次操作，节流注重规律执行。实际应用需注意this指向、首次执行配置及延迟时间合理性，合理封装可复用并优化用户体验与系统负载。
2025-11-18 16:28:02
507
TypeScript中处理Map类型值约束与非空断言操作符!的应用 本文探讨了TypeScript在Map类型中对特定值进行约束的局限性，以及如何在使用如find方法时，通过非空断言操作符!来安全地处理编译器无法静态推断的运行时确定性。当业务逻辑确保某个值一定存在，但类型系统无法捕获时，!操作符提供了一种桥接静态类型检查与运行时确定性的有效方式，从而避免不必要的空值合并操作。
2025-11-18 16:08:31
982
React中处理表单输入ID与数组现有ID的精确匹配：避免类型陷阱 本文旨在解决React应用中，从表单获取的用户输入ID与数组中已存在的ID进行比对时，因数据类型不匹配导致的逻辑错误。核心问题在于HTML元素返回的是字符串，而数组中的ID通常为数字类型。我们将详细讲解此问题，并提供使用parseInt()进行类型转换的专业解决方案，确保数据比对的准确性与健壮性。
2025-11-18 16:08:02
200
Blazor应用中FontAwesome本地部署与性能优化指南 本文旨在解决Blazor应用中FontAwesome图标本地部署时常见的性能问题和显示异常。核心内容聚焦于指出使用本地CSS方式引入FontAwesome时，缺少必要的/webfonts文件夹是导致图标显示不正确或加载缓慢的关键原因。文章将详细阐述FontAwesome的两种加载机制，提供正确的本地文件结构配置，并指导开发者如何通过合理配置实现图标的正确显示与最佳加载性能。
2025-11-18 15:59:02
538
js中如何理解location对象方法 location对象提供URL信息和导航功能，其属性包括href、protocol、host、hostname、port、pathname、search和hash，分别对应URL各部分；通过assign()跳转页面并保留历史记录，replace()替换当前页面不留记录，reload()重新加载页面，可强制刷新；直接设置location.href实现跳转更常用；还可结合URLSearchParams解析查询参数，或修改hash实现锚点定位，掌握这些方法可有效控制页面导航与URL状态。
2025-11-18 15:50:03
385
JavaScript并发控制与Promise高级用法 并发控制通过限制同时执行的任务数防止资源过载，常用asyncPool实现；结合Promise.allSettled处理全部结果、Promise.race设置超时、优先级队列调度，提升异步任务的稳定性与效率。
2025-11-18 15:43:02
119
浏览器中动态创建与导入JavaScript模块的实践指南 在浏览器环境中，程序化地创建JavaScript文件并动态导入是常见的需求，但直接使用File对象进行import()会因缺乏可解析的URL而失败。本教程将详细介绍如何利用URL.createObjectURLAPI为程序化创建的File或Blob生成一个临时的、可导入的URL，并结合动态import()实现模块的加载，同时强调资源管理的重要性，通过URL.revokeObjectURL避免内存泄漏。
2025-11-18 15:36:22
603
JavaScript策略模式_算法替换机制 策略模式是将算法封装为可互换的对象，通过分离逻辑提升灵活性；如表单验证中用validationStrategies统一管理规则，避免冗长判断。
2025-11-18 15:35:02
343
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部