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

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

开发者插件
 

React开发者工具-React Developer Tools 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开发者工具-React Developer Tools Chrome插件图片

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

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

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

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

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

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

当前版本:0.13.0 最后更新日期:2015-02-04 文件大小:1.5MB

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

本站下载 已有 64087 人成功下载
标签:

React开发者工具-React Developer Tools Chrome插件近一年下载统计

月份 当月下载量
2015年02月React开发者工具-React Developer Tools Chrome插件共 12573 次下载
2015年03月React开发者工具-React Developer Tools Chrome插件共 8387 次下载
2015年04月React开发者工具-React Developer Tools Chrome插件共 10138 次下载
2015年05月React开发者工具-React Developer Tools Chrome插件共 8702 次下载
2015年06月React开发者工具-React Developer Tools Chrome插件共 12001 次下载
2015年07月共 7664 次下载
2015年08月共 8431 次下载
2015年09月共 10975 次下载
2015年10月共 9089 次下载
2015年11月共 5491 次下载
2015年12月共 5886 次下载
2016年01月共 9476 次下载
2016年02月共 5751 次下载
2016年03月共 9241 次下载
2016年04月共 10972 次下载
2016年05月共 9394 次下载
2016年06月共 8268 次下载
2016年07月共 4439 次下载
2016年08月共 10305 次下载
2016年09月共 11548 次下载
2016年10月共 9811 次下载
2016年11月共 7199 次下载
2016年12月共 12352 次下载
2017年01月共 12388 次下载
2017年02月共 7924 次下载
2017年03月共 11785 次下载
2017年04月共 12470 次下载
2017年05月共 12732 次下载
2017年06月共 4518 次下载
2017年07月共 8093 次下载
2017年08月共 10387 次下载
2017年09月共 9031 次下载
2017年10月共 5874 次下载
2017年11月共 7866 次下载
2017年12月共 10198 次下载
2018年01月共 10844 次下载
2018年02月共 5165 次下载
2018年03月共 9738 次下载
2018年04月共 11631 次下载
2018年05月共 5880 次下载
2018年06月共 8671 次下载
2018年07月共 7975 次下载
2018年08月共 10042 次下载
2018年09月共 12438 次下载

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

BaiduHitMan Wordpress插件

开发者插件 2018-10-03 10:05:18

百度测试小流量时通常采用query加sid的方式,这种方式并不能完全模拟线上场景,线上不是单一sid,且有很多同层实验,通过BaiduHitMan来命中指定的sid属于自然命中,测试结果更可靠

Color Picker Pro Wordpress插件

开发者插件 2015-03-30 18:31:24

拾色器Pro允许您快速抢十六进制代码的颜色从您的浏览器中!
我创建拾色器专业版,以帮助我提供了一些基本的网页设计任务。我希望能够得到对颜色的十六进制代码,立即无需打开其他应用程序,如Photoshop 。

如果您有任何关于拾色器的问题或建议临,随时在砸我的电子邮件mdlrichardson@gmail.com

跟随我的G 更新! https://plus.google.com/ MarkRichardson90/

感谢下载和请随

GitHub Time Tracking Wordpress插件

开发者插件 2015-03-26 18:39:31

添加时间跟踪到GitHub的问题跟踪与收获
一个一键式实时跟踪功能,集成了所有的问题或拉在GitHub的系统请求

用法:
- 注册。免费帐户嘉实系:

http://try.hrv.st/66lx

- 然后安装此插件。一个新的按钮旁边出现#ticket数量
- 只需点击一下,你就可以开始跟踪的时间。该对话框还会显示已这张票花了你的时间的总和
- 丰收提供了巨大的项目报告 - 与链接回到GitHub的门

Telerik Test Studio Chrome Playback 2014.1 Wordpress插件

开发者插件 2015-02-15 15:25:16

测试的Telerik工作室的Chrome扩展播放
测试的Telerik Studio和测试框架的Chrome扩展播放回放能够在Chrome Web浏览器的网络测试。自动化涵盖全部采用现代技术,如HTML5 , JavaScript调用, AJAX请求, KendoUI Widget和更多的Web应用程序。

扩展与测试的Telerik Studio和测试框架版本2014.1或更早版本兼容。Test",1,[["测试",1000,false,false],["试验",0,fals

Cached Wordpress插件

开发者插件 2015-03-03 01:02:59

指示是否响应是从磁盘缓存取出
缓存
======

对于其标题栏中所请求的URL是从磁盘缓存中提取的页面,一个图标将被放置在多功能框(地址栏)的右手边。点击该图标将带您到高速缓存视图页面的URL。

源是非常简单,可在https://github.com/snyamathi/cachedIndicates if",1,[["指示是否",1000,false,false],["表示是否",0,false,false],["表明是否",0,false,

HelvetiGone Wordpress插件

开发者插件 2016-06-10 22:31:30

Get rid of Helvetica.
There are people out there who dislike Helvetica.

I am not one of those people.

But maybe you are. Maybe you're disgusted by Helvetica's perfectly

metaTaber Wordpress插件

开发者插件 2015-04-14 23:52:14

您当前选项卡中执行各种任务。
当你调整画面,工具提示将在右上角的屏幕和窗口的大小显示。

如果你点击浏览器图标,您的当前标签会变成一个弹出窗口。

如果您按下Alt P,你目前的标签将被寄予厚望之间切换。

如果您按下Alt K或按Alt J ,在URL中的最后一个数字将递增或递减( EG& QUOT ; page01.htm & QUOT ;变成& QUOT ; page02.htm & QUOT ; )

WrapAPI Wordpress插件

开发者插件 2016-07-21 08:37:28

Captures requests and sends them to the WrapAPI service to be turned into APIs. For more information, visit http://wrapapi.com
For more details, visit https://wrapapi.com

Light Markdown Editor Wordpress插件

开发者插件 2015-04-05 09:33:36

一个独立的降价编辑
灯降价编辑器是一个活的编辑器输入降价与谷歌Chrome浏览器的实时预览。

lightmd不依赖于后端。它没有内容发送到任何外部服务器。

lightmd的设计是轻量级的,不是功能丰富,同时还提供了一些灵活性的暂存器。

预览支持三种风格,无(浏览器的默认渲染),Github上(灵感),和一个自定义lightmd风格(见于截图)。

lightmd允许出口.md,HTML,并直接打印从预览框当你在浏览

MAMA-HD Wordpress插件

开发者插件 2018-03-06 12:11:31

妈妈再也不用担心我的 MacBook 发热了计划之 1080P

项目地址:https://github.com/nareix/mama-hd

『妈妈计划』用于解决在看视频网站时 MacBook 发(guang)热(gao)严(tai)重(duo)的问题,使用 video 来替换原来的 flash 播放器。本分支计划实现了用原生 video 实时转码播放 Bili