当前位置: Chrome插件首页 > 开发者插件 > React Developer Tools - React开发者工具 Chrome插件

React Developer Tools - React开发者工具 Chrome插件

插件分类:开发者插件
直达下载

React Developer Tools - React开发者工具 Chrome插件图文教程

React Developer Tools 插件概述

React Developer Tools插件是什么?React Developer Tools是一款由facebook开发的有用的Chrome 浏览器扩展,可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。添加react developer tools到chrome,是对chrome开发工具的React调试工具。React的开发工具是开源Chrome DevTools延伸反应的JavaScript库。它允许你检查React在Chrome开发者工具组件的层次结构(原名WebKit Web Inspector)。你会得到新的标签要求在你的Chrome DevTools反应。这表明你的根反应组件在页面渲染,以及他们最终渲染组件。

react developer tools

React Developer Tools 插件功能介绍

React Developer Tools插件有什么用?在了解React Developer Tools之前最好先了解一下,React!
React究竟是什么?Facebook把它简单低调地定义成一个“用来构建UI的JavaScript库”。这个定义也许会让我们联想到许多JavaScript模板语言(比如Handlebars和Swig),或者早期的控件库(比如YUI和Dojo),但是React所基于的几个核心概念使它与那些模板和控件库迥然不同。事实上这几个核心概念非常超前,已经给整个前端世界带来了冲击性的影响。它们包括:

组件和基于组件的设计流程;
单向数据流动;
虚拟DOM取代物理DOM作为操作对象;
用JSX语法取代HTML模板,在JavaScript里声明式地描述UI。
这几条简单的原则放在一起带来了大量的好处:

前端和后端都能够从React组件渲染页面,完全解决了SEO长期困扰JavaScript单页应用的问题;
我们可以简单直接地写前端测试而完全忘掉DOM依赖;
组件的封装方式和单向数据流动能够极大地简化前端架构的理解难度。

React Developer Tools 插件下载与安装

1.React Developer Tools插件哪里下载?可以在本站下方或者chrome商店搜索React Developer Tools插件下载。
2.
React Developer Tools如何安装?如果你可以打开chrome商店,搜索到React Developer Tools就可以直接点击下载安装。如果你的chrome商店无法打开,可以参照本站文章:chrome应用商店也进不去怎么办?
3. 也可以选择离线安装
React Developer Tools教程如下:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件? 如果CRX格式插件不能离线安装怎么办
4.你也可以随时随地卸载
React Developer Tools插件。


React Developer Tools 插件使用方法

1.React Developer Tools插件如何使用?怎么用?
安装成功后,浏览器的右上方出现现图示的log,用户如果想要调试的话就点击log就可以了。
通过选择树中的一个组件,你可以在右边的面板中检查和编辑它的当前的道具和状态。在面包屑,你可以检查所选组件,创建它的组件,创建一个组件,等等。如果您使用常规元素选项卡检查页面上的一个反应元素,然后切换到“React”选项卡,该元素将在“React树”中自动选择。
2.如下图所示显示了安装了 React Developer Tools 的 example3 组件分层结构外观。
reactdevelopertools的安装成功分层


3.类似地,如果在一个组件的渲染阶段有一个断点,将在“React”选项卡中自动选择。这允许你在渲染树中一步一步看到一个组件如何影响另一个。通过打破错误,你可以很容易地找到哪些组件在渲染过程中抛出一个错误,和什么样的道具导致它。

如何利用reactdevelopertools进行调试

你可能感兴趣:推荐适合web开发者的实用chrome插件

React Developer Tools - React开发者工具 Chrome插件图片

React Developer Tools - React开发者工具基本信息

插件名称:React Developer Tools - React开发者工具 插件作者:Facebook 插件语言:English 官方站点:http://facebook.github.io/react/ 插件唯一标识:fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools - React开发者工具用户数和评分

下载次数:64087 用户评分:3.97753 (共5分) 参与评分人数:89

React Developer Tools - React开发者工具文件信息

当前版本:0.13.0 最后更新日期:2020-07-09 文件大小:1.5MB

React Developer Tools - React开发者工具下载地址

React Developer Tools - React开发者工具相关插件

AlloyDesigner - 前端重构开发辅助工具

开发者插件 2019-10-28 14:49:24

AlloyDesigner是来自Tencent AlloyTeam的前端开发工具,其只出现开发阶段的一定时期,可以在制作时期,也可以在开发测试期,旨在提高前端开发的效率,获得更加便捷的开发体验。

PageXray

开发者插件 2019-11-07 08:56:20

PageXray是一款chrome插件,它将向您显示在任何页面上使用的技术。

NetBeans Connector

开发者插件 2019-05-19 03:19:17

在NetBeans Connector提供获奖的NetBeans IDE和谷歌Chrome浏览器。
的NetBeans IDE提供了一套完整的JavaScript和HTML5的开发工具,包括代码编辑,调试,现场造型,开发与iOS和Android的奖项之间的深

Webstorm网页调试插件:JetBrains IDE Support

开发者插件 2019-03-05 20:22:16

JetBrains IDE Support是一款支持编译即时显示在浏览器上调试的谷歌浏览器插件。作为web开发人员常用的开发者插件,程序员习惯称之为JB插件。这款调试插件需要与一些开发工具结合使用,

Mobile/Responsive Web Design Tester

开发者插件 2019-11-07 09:11:18

Responsive Web Design Tester是一款可以模拟手机等移动设备来访问PC端的网页进而进行测试的Chrome插件,是一种快速、简单的测试响应性网站的方法。

Postman Interceptor

开发者插件 2018-04-16 16:07:54

送你发送请求通过邮差应用程序,它使用浏览器Cookie通过邮差镀铬的应用程序。
邮差拦截器发射帮助请求。
它也可以发送标题这是由镀铬通常的限制,但是对于测试API的关键。

Postman

开发者插件 2018-04-16 16:08:38

Postman是一个非常有力的Http Client工具,Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件,可在Web服务测 试中用来进行接口测试。

Domecross - 多点访问测试插件

办公插件 2019-11-22 09:20:29

为开发者提供的Chrome浏览器网站多点访问测试插件,可以模拟网站多地点打开效果和访问速度测试,极大提高您的测试工作的效率.。

postman接口测试系列教程(一):环境配置

聚合专题 2018-06-25 22:16:02

最近忙着项目接口测试,经过不同工具的对比,发现 postman 使用起来挺顺手的,所以马上决定使用这个工具进行接口测试工作。刚开始的时候,了解了下接口测试的相关信息,直接着手

chrome开发者工具实现整站截屏

聚合专题 2018-08-30 11:44:32

我们经常要遇到将整个网站作为图片保存下来的情况,而windows系统自带的PrintScreen键只能保存当前屏幕的截图 在chrome浏览器中可以安装第三方的截图插件实现整站截图 今天我们要介绍

JetBrains IDE Support v2.0.10

开发者插件 2019-03-05 20:23:21

使用 Google Chrome 的 JetBrains IDE 支持扩展在 web storm 2017.2 或更早版本 (或 JetBrains 的其他 IDE) 中调试客户端应用程序或者在 web storm 2018.2 或更早版本中使用实时编辑功能。

React Developer Tools - React开发者工具同类插件推荐

表单君 v2.10.0 Chrome插件

开发者插件 2019-04-01 08:44:01

* * 此扩展的目的是帮助开发人员快速轻松地测试他们的表单。* *
此扩展允许您填写所有表单输入 (文本框、 textareas 、单选按钮、下拉列表等)。))带有 * * 随机/虚拟 * * 数据。
对于使用表单的开发人员来说,这个扩展是必不可少的,因为它避免了手动在字段中输入值的需要。
-在表单中填充所有文本框。
-支持 maxlength 属性。

一马: 在线代码翻译 Chrome插件

开发者插件 2019-03-13 10:22:09

中文编程知乎专栏介绍文章: https://zhuanlan.zhihu.com/p/48597668

注意: 插件内置词库仅有三千最常用词. 为保证翻译效果, 请安装包含77万词条的离线英汉词典插件:
https://chrome.google.com/webstore/detail/%E7%A6%BB%E7%BA%BF%E8%8B%B1%E6%B1%89%E8%AF%

META SEO inspector v2.1.0 Chrome插件

开发者插件 2019-12-06 09:12:18

2018 更新!
添加了许多修复程序,并更新了一些新规则,如描述的新 230 个字符限制。
元数据不仅仅是通常的 HTML 元标签,还有 XFN 标签、各种微格式、最近引入的规范属性、无

527轻会议屏幕共享录制 Chrome插件

开发者插件 2017-03-02 12:25:39

527轻会议屏幕共享录制插件
本插件是用来让浏览器能实现屏幕共享的功能。在使用527轻会议这个软件网络视频会议系统的时候,使用屏幕共享时会检测浏览器是否安装该插件。只有安装该插件才能使用屏幕共享的功能。

为打击盗链困扰,本站已启用公众号人机验证
微信扫码关注公众号,发送"插件"二字获得验证码,验证码5分钟有效。

Chrome插件离线安装方法