热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

chrome安装reactdevtools开发工具

我开始安装react-devtools的时候百度了一波,都是写的不清不楚,官网又都是英文的也不是完全理解,经过一番折腾出来以后,写个文档记录一下,也可避免新手首次安装走弯路我安装react-devtools的前提是本地安装了git以及node我相信准备学react的同学,应该都有了解使用1.首先打开官网:https:github.comfacebook




我开始安装react-devtools的时候 百度了一波,都是写的不清不楚,官网又都是英文的 也不是完全理解,经过一番折腾出来以后,写个文档记录一下,也可避免新手首次安装走弯路

我安装react-devtools的前提是本地安装了git 以及node 我相信准备学react的同学,应该都有了解使用



1.首先打开官网:https://github.com/facebook/react-devtools


先已经切换到


chrome安装react-devtools开发工具


 


 


https://github.com/facebook/react-devtools/tree/v3




 

chrome安装react-devtools开发工具







 







 


2.本地打开git bash 然后复制上面的github下载链接

在git中输入:

git clone https://github.com/facebook/react-devtools.git

3.克隆完成以后

cd react-devtools //切换到工程目录

cnpm i //安装依赖

4.安装完成以后切换目录

cd shells/chrome //切换到chrome目录下

5.然后运行node build.js 当前目录下会生成build目录 这个build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包


到这里有两种方式在chrome浏览器中安装react-devtools

方法一:6.1 接着上面的第五步 在git中将目录切换到react-devtools目录下:

运行命令npm run test:chrome

此时会自动安装react-devtools 并打开chrome浏览器










 

chrome安装react-devtools开发工具







 












此时在浏览器右上角的工具栏里打开->更多工具->扩展程序里就可以看到我们安装成功了










 

chrome安装react-devtools开发工具







 







方法二:6.2:打开chrome浏览器 如6.1打开扩展程序

进行如下操作:










 

chrome安装react-devtools开发工具







 







打开开发者模式按钮 选择‘’加载已解压扩展程序‘’选择react-detools目录下的shells->chrome中build目录中的unpacked即可


到此 react-devtools安装成功


转链接:https://www.jianshu.com/p/8afd06135fd5
来源:简书



















推荐阅读
  • 2023年5月20日凌晨5:20(北京时间),由区块链技术和去中心化应用平台ArcBlock(区块基石)研发的ABT钱包移动应用程序,在苹果App Store和Google Play同步上线,标志着用户在数字世界中首次能够完全掌控自己的身份。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文详细介绍了Java中org.w3c.dom.Text类的splitText()方法,通过多个代码示例展示了其实际应用。该方法用于将文本节点在指定位置拆分为两个节点,并保持在文档树中。 ... [详细]
  • 解决微信电脑版无法刷朋友圈问题:使用安卓远程投屏方案
    在工作期间想要浏览微信和朋友圈却不太方便?虽然微信电脑版目前不支持直接刷朋友圈,但通过远程投屏技术,可以轻松实现在电脑上操作安卓设备的功能。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 本文探讨了如何在 PHP 的 Eloquent ORM 中实现数据表之间的关联查询,并通过具体示例详细解释了如何将关联数据嵌入到查询结果中。这不仅提高了数据查询的效率,还简化了代码逻辑。 ... [详细]
  • 本文介绍了一种有效的方法来检测硬盘上的视频文件是否损坏或存在缺帧问题。虽然一些常见的搜索引擎并未提供专门的工具,但通过使用FFmpeg等专业软件,可以全面验证各种视频格式的数据完整性,包括较为古老的AVI格式。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 近期,谷歌公司的一名安全工程师Eduardo Vela在jQuery Mobile框架中发现了一项可能引发跨站脚本攻击(XSS)的安全漏洞。此漏洞使得使用jQuery Mobile的所有网站面临潜在的安全威胁。 ... [详细]
  • 图像分类算法的优化策略与实践
    本文探讨了《Bag of Tricks for Image Classification with Convolutional Neural Networks》论文中的多项技术,旨在通过具体实例和实验验证,提高卷积神经网络在图像分类任务中的性能。文章详细介绍了从模型训练加速、网络结构调整到训练参数优化等多个方面的改进方法。 ... [详细]
  • 本文详细介绍了 com.facebook.drawee.view.SimpleDraweeView 中的 setScaleType 方法,提供了多个实际代码示例,并解释了其在不同场景下的应用。 ... [详细]
  • 本文详细记录了在银河麒麟操作系统和龙芯架构上使用 Qt 5.15.2 进行项目打包时遇到的问题及解决方案,特别关注于 linuxdeployqt 工具的应用。 ... [详细]
  • VSCode与Gitee集成:项目提交的高效实践
    本文介绍如何利用VSCode内置的Git工具将项目提交到Gitee,简化Git命令的使用,提升代码管理效率。同时分享一些常见的踩坑经验和解决方案。 ... [详细]
  • a16z 宣布成立全新的加密研究实验室,旨在推动加密技术和 Web3 领域的科学发展。 ... [详细]
author-avatar
123
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有