像专业人士一样调试你的 React 应用

在寻找代码中的实际错误时，我们需要专注于工具和系统流程来分析代码，找出问题所在，并接受编写代码的人可能无法解答我们疑问的事实。然而，有时错误可能是我们自己造成的🙋‍♂️，我们很难设身处地地去理解自己当时为什么这么做。无论哪种情况，它们都有一个共同点：我们需要使用工具来帮助我们调试应用程序并找出问题所在。

我列出了一些工具/方法，如果正确使用，你的调试能力就能像专业人士一样。那就开始吧。

React 开发者工具。React
开发者工具是一款浏览器开发者工具扩展程序。它允许你在 Chrome 开发者工具中检查 React 组件的层次结构。该工具有助于跟踪状态并全面概览组件的层次结构。

为什么渲染？
Welldone Software 的 Why-did-you-render 为 React 添加了 monkey patch，用于通知您可能可以避免的重新渲染。（也适用于 React Native。）它可以帮助您轻松追踪某个组件重新渲染的时间和原因。

Realize For React
Realize 是一款用于 React 组件树可视化工具的浏览器扩展。随着 React 应用程序的规模不断扩大，跟踪状态和全面概览组件层次结构变得越来越困难。Realize 是一款帮助开发者可视化 React 应用程序结构和状态流的工具，尤其是在应用程序规模和复杂性不断增长的情况下。

Chrome 性能分析器
该分析器测量 React 应用程序的渲染频率以及渲染的“成本”。其目的是帮助识别应用程序中运行缓慢的部分，并可以通过诸如记忆化之类的优化来获益。

Sapling：VSCode 上的扩展
Sapling 是一款专为 React 开发者打造的 VS Code 扩展。
使用 Sapling，您无需猜测当前文件的父组件。您可以通过选择任何组件文件作为根文件来构建组件树，并获取任何层级的可用 props 信息。

附言：我确信我还没有涵盖所有可用于调试 React 应用程序的技术，所以如果你有一个最喜欢的但未在此处列出的技术，请在评论中分享，以便我们都可以从中学习。😊

就是这样！！#HappyCoding