插件介绍
React Developer Tools是一款类似于浏览器调试台的插件开发者调试工具，由facebook官方开发推出，非常好用。
在浏览器中安装这个插件后，可以查看Chrome开发者工具中组件的层次、各个组件的Props、States等信息。
安装完成后，你将在Chrome DevTools中看到一个名为React的新选项。点击它，就可以查看新增的内容了。
通过这里提供的组件之一，你可以在右侧面板中进行多项操作。
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！
React究竟是什么？Facebook把它简单低调地定义成一个“用来构建UI的JavaScript库”。这个定义也许会让我们联想到许多JavaScript模板语言（比如Handlebars和Swig），或者早期的控件库（比如YUI和Dojo），但是React所基于的几个核心概念使它与那些模板和控件库迥然不同。事实上这几个核心概念非常超前，已经给整个前端世界带来了冲击性的影响。它们包括：
组件和基于组件的设计流程；
单向数据流动；
虚拟DOM取代物理DOM作为操作对象；
用JSX语法取代HTML模板，在JavaScript里声明式地描述UI。
这几条简单的原则放在一起带来了大量的好处：
前端和后端都能够从React组件渲染页面，完全解决了SEO长期困扰JavaScript单页应用的问题；
我们可以简单直接地写前端测试而完全忘掉DOM依赖；
组件的封装方式和单向数据流动能够极大地简化前端架构的理解难度。
插件使用方法
1.React Developer Tools插件如何使用？怎么用？
安装成功后，浏览器的右上方出现现图示的log，用户如果想要调试的话就点击log就可以了。
2.如下图所示显示了安装了 React Developer Tools 的 example3 组件分层结构外观。
3.类似地，如果在一个组件的渲染阶段有一个断点，将在“React”选项卡中自动选择。这允许你在渲染树中一步一步看到一个组件如何影响另一个。通过打破错误，你可以很容易地找到哪些组件在渲染过程中抛出一个错误，和什么样的道具导致它。
React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.
You will get a new tab called React in your Chrome DevTools. This shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.
By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.
If you inspect a React element on the page using the regular Elements tab, then switch over to the React tab, that element will be automatically selected in the React tree.<p><br></p>
浏览器插件安装详细步骤：Chrome浏览器如何安装插件扩展
