React developer tools调试工具全网最新最全安装教程

这篇具有很好参考价值的文章主要介绍了React developer tools调试工具全网最新最全安装教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

由于大家都知道的原因,可以使用以下步骤安装:

这个调试工有不同的版本,版本v4.27.4针对高版本react,按需选择,我当前使用的react版本是:

    "react": "^18.2.0",

v4.27.4教程:

1、下载
下载地址:https://www.crx4chrome.com/crx/287411/

直接下载:React developer tools v4.27.4.crx

会下载一个.crx文件,打开谷歌浏览器的扩展程序管理,把.crx文件拖拽到程序管理里面就可以完成安装,超级简单
React developer tools调试工具全网最新最全安装教程

v3.6.0教程:

有两种安装方式:

第一种:

下载我准备好的资源资源直接,解压后按照步骤安装:
下载文件:React developer tools v3.6.0

打开浏览器点击扩展程序图标 >> 点击管理扩展程序 React developer tools调试工具全网最新最全安装教程

React developer tools调试工具全网最新最全安装教程

React developer tools调试工具全网最新最全安装教程

第二种:

1、下载
最新下载地址: https://github.com/facebook/react-devtools/tree/v3
我们可以使用 git clone到本地也可以下载zip包
React developer tools调试工具全网最新最全安装教程

2、 如果是zip包先进行解压,然后
react-devtools-3目录下执行 npm install
react-devtools-3\shells\chrome目录下执行 node build
React developer tools调试工具全网最新最全安装教程

成功后会在react-devtools-3\shells\chrome目录下生成一个build文件夹
React developer tools调试工具全网最新最全安装教程

3、如上图成功后,你可以选择下面方式安装或者第一种方式安装

切回react-devtools-3目录然后执行:npm run test:chroma

React developer tools调试工具全网最新最全安装教程

此时会自动安装react-devtools 并打开chrome浏览器
React developer tools调试工具全网最新最全安装教程文章来源地址https://www.toymoban.com/news/detail-480294.html

到了这里,关于React developer tools调试工具全网最新最全安装教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Stable Diffusion 保姆级教程!全网最新最全!小白必备!

    ** Stable Diffusion无疑是最近最火的AI绘画工具之一,所以本期给大家带来了全新Stable Diffusion 保姆级教程资料包(文末可获取) 2022年绝对是人工智能爆发的元年,前有 stability.ai 开源 Stable Diffusion 模型,后有 Open AI 发布 ChatGPT,二者都是里程碑式的节点事件,其重要性不亚于当

    2024年02月03日
    浏览(45)
  • 全网最新最全的基于Tensorflow和PyTorch深度学习环境安装教程: Tensorflow 2.10.1 加 CUDA 11.8 加 CUDNN8.8.1加PyTorch2.0.0

    本文编写日期是:2023年4月. Python开发环境是Anaconda 3.10版本,具体Anaconda的安装这里就不赘述了,基础来的。建议先完整看完本文再试,特别是最后安装过程经验分享,可以抑制安装过程中一些奇怪的念头,减少走弯路。 目录 1. NVidia驱动安装  2. 安装CUDA Toolkit 3. 安装Tensorfl

    2024年02月08日
    浏览(53)
  • 2023最新首发,全网最全 Spring Boot 学习宝典(附思维导图)

    作者: bug菌 博客:CSDN、掘金、infoQ、51CTO等 简介:CSDN/阿里云/华为云/51CTO博客专家,博客之星Top30,掘金年度人气作者Top40,51CTO年度博主Top12,掘金/InfoQ/51CTO等社区优质创作者,全网粉丝合计10w+,硬核微信公众号「猿圈奇妙屋」,欢迎你的加入!免费领取简历模板/学习资料

    2024年02月11日
    浏览(50)
  • macbook Safari 如何打开F12 Console 控制台 开发者工具 Developer Tools

    首先要启用开发者模式,然后就可以打开开发者工具。 Safari–Preferences呼出首选项面板(或用快捷键 command+, 直接呼出)。 在 Advanced 菜单面板下,勾选 Show Develop Menu in menu Bar 。 顶部菜单栏在 勾选这个选项之前 : 勾选后 ,在 Bookmarks 和 Window 之间多了一个 Develop : 点击这个

    2024年02月11日
    浏览(73)
  • 2023版最新最全React面试题

    React 作为前端使用最多的框架,必然是面试的重点。我们接下来主要从 React 的使用方式、源码层面和周边生态(如 redux, react-router 等)等几个方便来进行总结。 这里主要考察的是,在开发使用过程中,对 React 框架的了解,如 hook 的不同调用方式得到的结果、函数组件中的

    2023年04月19日
    浏览(38)
  • 全网最全的Kali工具大全

    本文将kali中常用的工具进行了汇总。对每个工具的具体用途做了大概的描述。希望通过本文,能对初学kali的小伙伴有所帮助。当然里面部分工具可能随着系统版本的提高而移除,但我们仍可安装。总结不全之处还望见谅。 名称 类型 使用模式 功能 dmitry 信息收集 命令行 wh

    2024年01月18日
    浏览(32)
  • 全网最全的 postman 工具使用教程

    postman是一款支持http协议的接口调试与测试工具,其主要特点就是功能强大,使用简单且易用性好 。 无论是开发人员进行接口调试,还是测试人员做接口测试,postman都是我们的首选工具之一 。 那么接下来就介绍下postman到底有哪些功能,它们分别都能干些什么 。下面先通过

    2024年03月21日
    浏览(40)
  • 全网最新最全的Appium自动化:使用appium后安卓手机无法调出键盘解决方法

    问题 :用appium进行真机调试后,使用手机的app进行输入时无法调出键盘。 原因 :appium调试时,将手机输入法设置成了Unicode IME 注:按键详细操作参考 :转载至 作者:oscarforever   地址:https://www.cnblogs.com/oscarforever/p/10721774.html 解决方法: 方法一,手机设置里修改输入法:

    2024年02月04日
    浏览(49)
  • 全网最全100个AI工具导航网站合集

    随着ChatGPT年前的爆火,人工智能也变成当今最热门的领域之一,它正在改变着我们的生活和工作方式。无论你是想要学习人工智能的基础知识,还是想要利用人工智能来提升你的业务效率和创新能力,都需要找到合适的AI工具来帮助你实现目标。 但是,在海量的AI工具中,如

    2024年02月09日
    浏览(40)
  • 这个应该是全网最全的接口测试工具之postman

    接口测试是什么? 百度百科给出的解释是: 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关系等。 接口包括内

    2024年02月02日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包