当前位置: 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插件近一年下载统计

月份 当月下载量
2014年12月React开发者工具-React Developer Tools Chrome插件共 5868 次下载
2015年01月React开发者工具-React Developer Tools Chrome插件共 9214 次下载
2015年02月React开发者工具-React Developer Tools Chrome插件共 11387 次下载
2015年03月React开发者工具-React Developer Tools Chrome插件共 11701 次下载
2015年04月React开发者工具-React Developer Tools Chrome插件共 4059 次下载
2015年05月共 4726 次下载
2015年06月共 11195 次下载
2015年07月共 6899 次下载
2015年08月共 4931 次下载
2015年09月共 10094 次下载
2015年10月共 10128 次下载
2015年11月共 8886 次下载
2015年12月共 8241 次下载
2016年01月共 6433 次下载
2016年02月共 5982 次下载
2016年03月共 4667 次下载
2016年04月共 9819 次下载
2016年05月共 10176 次下载
2016年06月共 8318 次下载
2016年07月共 8708 次下载
2016年08月共 9419 次下载
2016年09月共 10286 次下载
2016年10月共 7083 次下载
2016年11月共 8014 次下载
2016年12月共 10721 次下载
2017年01月共 7500 次下载
2017年02月共 3994 次下载
2017年03月共 9204 次下载
2017年04月共 5631 次下载
2017年05月共 6476 次下载
2017年06月共 4690 次下载
2017年07月共 7130 次下载
2017年08月共 5676 次下载
2017年09月共 7950 次下载
2017年10月共 10889 次下载
2017年11月共 8413 次下载
2017年12月共 10611 次下载
2018年01月共 8734 次下载
2018年02月共 4688 次下载
2018年03月共 7902 次下载
2018年04月共 8418 次下载
2018年05月共 9565 次下载
2018年06月共 11347 次下载
2018年07月共 4372 次下载
2018年08月共 6701 次下载
2018年09月共 7253 次下载
2018年10月共 5116 次下载
2018年11月共 8368 次下载
2018年12月共 9137 次下载

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

Selector Assistant Chrome插件

开发者插件 2016-03-31 14:57:37

Description
This tool will help you getting jQuery/CSS/XPath Selector of any element on any page

How to use:
1/ First, click on extension icon
2/ Then, click on any web element

SharePoint Insider Chrome插件

开发者插件 2017-08-06 22:14:22

SharePoint Insider (SPI) for Chrome is a free SharePoint Discovery tool for Developers and supports SharePoint Online/Office 365,…
SharePoint Insider (SPI) for Chrome is a free SharePoint Discover

Check Drupal Version Chrome插件

开发者插件 2016-10-17 19:02:40

This extension shows the drupal version installed in a site
* The add-on will be helpful for all developers to find the current Drupal version for a particular site.

* We can easily iden

YouTrack Tweaks Chrome插件

开发者插件 2018-06-01 16:43:41

Tweaks in this release:

Agile Board Custom Fields: add indicators for any set of custom fields to the lower-right corner of the card. You can use a single configuration for any card size or u

Chrome Recorder Chrome插件

开发者插件 2016-07-19 00:22:43

Record the user interactions, take screenshots and replay the actions. Also can mock XHR calls with a HAR file
Chrome Recorder is a chrome extension that can record the user interactions, take scr

QuickGrid Chrome插件

开发者插件 2015-01-10 19:42:12

覆盖在任何网页上的网格,设计和完美的网站,以帮助。代码可以在这里找到: https://github.com/rmartinez93/QuickGrid
这个扩展覆盖网格中的任何页面上,以帮助您设计像素完全一致的网站。所有的悬停,然后单击事件继续按预期运行,尽管覆盖,让你看到的任何事件如何影响对齐。这个工具是免费使用,开放源代码; https://github.com/rmartinez93/QuickGrid :所有的代码可以在这里找到

var_masterpiece Chrome插件

开发者插件 2016-06-12 00:55:34

Turn a var_dump into artwork
Turns nasty old var_dumps into something much much better.

Here's the deal: Trying to read var_dumps is a lot like trying to read multiple lines of text w

ePass Plugin Adapter Chrome插件

开发者插件 2018-07-15 19:50:26

ePass Plugin Adapter extension is a necessary component of ePass Cryptographic Plugin which is intended for digital signing in Electronic Passports System (EPS).

ePass Cryptographic Plugin is

Excavator launcher Chrome插件

开发者插件 2018-11-07 23:17:45

Launcher extension to start Excavator App for Google Chrome. Can be used to pick URL from currently opened tab in google chrome and open it for work in Excavator Tool for Diggernaut.com