当前位置: 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开发者工具插件图片

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

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

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

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

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

当前版本:0.13.0 最后更新日期:2019-03-20 文件大小:1.5MB

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

本站下载 已有 64087 人成功下载

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

Webstorm网页调试插件:JetBrains IDE Support

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

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

React Developer Tools - React开发者工具

开发者插件 2019-02-20 12:10:21

React Developer Tools是一款由facebook开发的有用的Chrome 浏览器扩展,可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏

Postman Interceptor

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

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

Postman

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

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

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 或更早版本中使用实时编辑功能。

Header Editor

开发者插件 2019-03-06 21:32:07

Header Editor是一款管理浏览器请求的Chrome扩展,包括修改请求头、修改响应头、重定向请求、取消请求。

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

Website Stats,Pagerank,Alexa and Seo report Chrome插件

开发者插件 2015-02-08 17:28:39

StatsTool - 免费在线搜索引擎优化分析和网站复审的工具。得到一个完整的网站是绝对检讨免费。
网站域名统计,分析,排名和SEO报告
StatsTool.com是网站所有者,管理者和广大网民检索与域名相关的信息的Web服务, IP地址,Web服务器和搜索引擎优化( SEO) 。它是为像网站估值,搜索引擎,交通流量报告,社会参与,安全,主机信息,域名WHOIS ,网页加载速度和更加任何网站的各种统计报表的工具。只需输入上面这样真棒报告您的域名。
------特点----

Forget Me - Clean History, Cookies & more Chrome插件

开发者插件 2015-03-30 19:33:05

删除一切有关的网站。饼干,历史, localStorage的,通过sessionStorage ...应有尽有!
单击该图标,一切都消失了......不只是饼干,还历史和HTML5客户端存储(本地存储和会话存储) 。我也正在删除不太知名的闪存饼干,但它看起来像有一些调皮的工作要做。

只需点击该图标,没有人会知道你访问过的网站!

如果你喜欢& QUOT ;勿忘我& QUOT ;你可能还喜欢和QUOT ;编辑这饼干& QUOT ;
https:

Vivocha On The Fly Chrome插件

开发者插件 2015-01-03 22:59:31

很多网友问我们没有插入的VAC ( Vivocha激活码)到他们的生产测试新服务的方式...
很多用户问我们没有插入的VAC ( Vivocha激活码)为测试新服务的方式自己。制作网站

我们要感谢我们的用户之一 - @fcurry - 为暗示我们这个谷歌的Chrome扩工程,它可以帮助你在执行。我们的客户成功经理已经广泛地使用它!

Vivocha - 在线客户互动变得容易

注意:这不是一个产品模块,我们不支持此作为功能

Live Window Size Chrome插件

开发者插件 2015-05-22 21:57:17

获取视口的宽度和放大器;高度悬停或调整,并设置视
特点:

1。当活跃,得到视大小而调整,或将鼠标悬停在您的网页底部上。

2。上下文菜单(右键菜单),您可以调整您的浏览器常见的预定义的移动设备的尺寸。此功能假定的书签栏是可见的,并且没有足够的安装的扩展,以防止浏览器从压榨一路

最新通报:1
。修正了视口大小是落后于其他元素。
2。增加了一些尺寸(让我知道其他常见的需要,我没有时间,使其动态虽然)

ScrummerTheodo Chrome插件

开发者插件 2018-08-05 14:11:39

Adds Story Points, Post-Estimation points and card IDs to Trello.

Heavily based on rickpastoor's amazing and lightning-fast Scrummer. Use rickpastoor's Scrummer if you need subtotals insid

Switcheroo Redirector Chrome插件

开发者插件 2015-11-23 08:58:27

设置自定义的重定向规则,即网页,脚本,图片等,使用简单的字符串替换做到这一点的任何HTTP请求。
允许URL重定向/ URL重写使用的文本替换。

例如<

PortChecker Chrome插件

开发者插件 2015-05-26 11:08:51

。网上检查端口
通过网上查询PortChecker的端口工具
这个工具允许你检查端口是否打开或不
您可以管理的设置页面上最喜欢的端口:添加自己的端口(或几个),便于检查。

PortChecker也决定了你的IP地址,并允许您将它复制到剪贴板(通过点击IP ) 。

提供通过PortScan.ru

Steam helper v1.0 Chrome插件

开发者插件 2016-07-20 10:04:04

It provides many new opportunities for market inventory and Steam (notified exchanges, quick sale, purchase)

Main function:
-Check…
It provides many new opportunities for market inven

JSON Formatter Dark Chrome插件

开发者插件 2018-06-01 22:18:45

DESIGN
This is a dark-theme redesign of Callum Locke's JSON Formatter, original extension and source code:
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgk

URL Monster Chrome插件

开发者插件 2016-01-12 10:10:14

A tool to easily observe, edit, or compare URLs.
URL Monster can help you:
1. Observe very long URL
2. Compare two URLs
3. Edit and visit a URL

Change log:

version 1.