编写react.js工具_使用React开发人员工具将React.js Explorer添加到Chrome

每个网络开发人员都应该已经了解了出色的Chrome开发人员工具 。 该功能内置于Chrome中 ，开发人员可以直接在浏览器中 检查页面并编辑或删除元素 。

它功能强大，是研究页面行为 （如延迟，页面资源或执行控制台命令）的最佳方法。

Facebook的团队创建了React.js库，该库为前端开发人员抽象了一层以重用某些UI元素 。

现在，使用React Developer Tools，您可以检查这些元素层次结构并在页面上进行编辑 。

这是一个完全免费的扩展程序 ， 由Facebook上的人们开发，因此您知道它的高质量。

您还可以研究对象树的不同状态和路径，包括哪些元素在其他元素的上方和下方。

在边栏中，您可以浏览道具和状态 ，使您可以研究同一棵树中其他元素的行为。 对于新的React用户来说，这实际上是一个很好的插件，因为它可以帮助他们了解更多关于库的信息。

当然，这还包括可能更改某个组件状态的所有事件侦听器 。 底部的面包屑让您轻松浏览父/子元素。

这远非完美的React工具。 但是，当您从头开始构建动态应用程序时，它将使您的工作变得更加轻松。

它是完全开源的 ，由Facebook维护并有经常更新的GitHub官方仓库 。

您可以为任何版本的Chrome安装此Chrome扩展程序 。 或者，如果您是Firefox用户，则可以签出支持FireFox v38及更高版本的FF插件 。 到目前为止，我还没有看到对Safari / Opera用户的任何支持，但这是一个开源扩展，因此可能会在不久的将来出现。

翻译自: https://www.hongkiat.com/blog/react-dev-tools/