React 与 Redux 结合，是网络上最快速、最灵活的 UI 框架之一。它易于编写，易于使用，非常适合团队。事实上，Mozilla 社区使用 React 来构建许多 Firefox DevTools UI，而且众所周知，Facebook UI 是使用 React 构建的。尽管它很受欢迎，但在浏览器中调试 React 仍然不容易。React 开发者工具 由 Facebook 和 Redux DevTools 由 Zalmoxisus 提供，可以让你在浏览器中直接检查、修改和调试代码。现在它们可用于 Firefox。这些附加组件以及其他类似 Vue 附加组件 将使调试流行的 JavaScript 框架变得更加容易。当与 Mozilla 的 Debugger.html 工具 结合使用时，所有这些独立工具将把你的浏览器变成一个功能齐全的调试器。

React

获取最新版本的 React DevTool 附加组件，点击这里。安装完成后，你就可以检查使用 React 的任何网站的 React 代码。当你访问一个由 React 支持的网站时，附加组件图标将出现在 Firefox 地址栏的右侧

通过按 command-option-i（Windows 上为 control-shift-i）、点击工具栏中的按钮或右键点击页面并选择“检查”来打开 DevTools。你将在基本 DevTools 面板旁边看到 React 面板。主面板现在将显示 React 树视图

React 工具的工作原理与其他任何 DevTool 非常相似。使用箭头键或 hjkl 键导航代码，右键点击组件以在元素窗格中检查它们，显示源代码等等。通过点击箭头展开或折叠项目。

侧边面板是存储变量和查看代码更新的理想场所。

还有一个很棒的搜索栏。

使用常规检查器检查页面上的 React 元素，然后切换到 React 选项卡。该元素将在 React 树中自动被选中。

你也可以右键点击一个元素，选择“查找 DOM 节点”，这样就可以找到任何元素的 DOM 节点。

Redux

React 和 Redux 就像牛油果和吐司一样相得益彰。Redux 为你的 React 库创建了一个可预测的状态容器，使其能够在几乎任何系统上可靠地运行。它还允许你“时间旅行”到以前版本的州。Firefox 的 Redux 开发者工具 允许你检查 Redux 操作和有效载荷、取消操作、记录操作 reducer 错误以及在更改 reducer 代码时自动重新评估已暂存的操作。

Redux 开发者工具在它的 GitHub 库上提供了广泛的文档，点击这里查看，包括 参数、方法，甚至关于如何 创建用于调试的 Redux 存储 的教程。请查看它们。

使用 Firefox 附加组件，你可以在浏览器中拥有完整的 React/Redux 调试工具集。
下载 Firefox 开发者版，然后查看 addons.mozilla.org 上提供的全部附加组件。