如何调试 React 应用

介绍

自从我开始从事软件开发工作以来，我发现自己每天的大部分时间都在调试一个大型的 React 应用。这并非代码编写不当造成的，而是我感觉自己每天都在经历的自然过程：

• 我可以进行调试以找到实际错误的根本原因
• 或者我可以作为正常开发过程的一部分进行调试（最有可能）

动图

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

我常常觉得调试并非为了解决影响客户的某个特定问题，而是软件开发过程中自然而然的一个过程。如果我想为现有应用添加一个功能（或者从头开始构建一个应用），我经常会遇到代码无法正常工作的情况🤷‍♂️，这时我就会拿出“调试宝库”，找出代码中的问题所在，以便继续推进开发流程。

特别注意：当我们自己引入错误时

让我们运用一些逻辑：🤔 如果我们自己创建了一个 bug，那么我们就无法解决它，因为如果可以，我们一开始就不会创建它了！这就是为什么我们需要额外的工具来帮助我们在查找 bug 的过程中跳出自我，就像我们是侦探，试图破案，而我们是主要嫌疑人一样。我们需要有条不紊，循序渐进，进行大量测试，并收集证据。这时，调试工具就派上用场了。

断点和debugger

在调试 React 应用时，我发现断点非常有用。主要有两种使用方法：

• debugger通过在源代码中编写语句
• 通过单击 Chrome 网络浏览器（或 Firefox、Edge 等）开发者工具中的特定代码行。

使用debugger语句

debugger 语句会调用任何可用的调试功能，例如设置断点。如果没有可用的调试功能，则此语句无效。-来源

假设我们有一个项目，我们想了解代码中特定部分发生了什么。在这个例子中，我使用了我的作品集网站的源代码，你可以在这个 GitHub 仓库中找到它。我引入了一个 bug，现在我将使用调试器来查找它。

在这个特定的错误中，与投资组合标题相关的第三个动画无法正常工作，所以我可以debugger在代码的该部分中写入语句。

文件保存并编译完成后，我重新加载页面，浏览器解析代码后，程序就会停在debugger包含该语句的那一行。然后，浏览器会在“开发者工具”窗格中显示有用的数据。

我们可以在源代码中将鼠标悬停在变量上，或者在右侧面板的“作用域”部分中查看当时变量的值。借助这个功能，我可以看到函数setIsAnimated1被调用时使用了错误的值。

使用断点

断点的工作方式非常相似。要启用断点，我们需要在 Web 浏览器中打开网站（在本例中我使用 Chrome），然后打开开发者工具。现在，如果我们点击“源”选项卡，然后点击我们想要调试的文件名对应的选项卡，我们将再次看到源代码，就像之前使用 的方法一样debugger。

注意：有关开发人员工具的“源”选项卡的更多信息，请阅读本文。

现在，为了创建断点，我们可以点击行号旁边的空白处。这些断点将列在右侧面板的“断点”部分中。现在我们可以重新加载页面，页面加载将在我们设置的断点处停止（我们可以点击播放按钮，告诉浏览器继续执行代码，从而继续加载页面）。

例如，如果您想了解有关该主题的更多信息，甚至设置条件断点或在删除节点时停止代码执行，我认为您应该阅读使用断点暂停代码文章。

React 开发者工具

之前的调试工具不仅适用于 React 应用，也适用于任何 JavaScript 应用。但是，在具体使用 React 应用时，我们有一个非常有用的工具：React Developer Tools浏览器扩展。您可以在相应的浏览器扩展市场中搜索找到此扩展。例如，对于 Chrome，您可以从此链接安装它。

React 开发者工具由两套主要工具组成：

• 组件工具，您可以在其中分析组件的结构，
• 以及Profiler工具，您可以在其中查看每个组件渲染所花费的时间以及它们如何更新。

组件选项卡

props在“组件”选项卡中，您将能够看到您正在分析的站点的组件结构（左侧面板） ，以及所选组件所具有的hooks（对于功能组件）或state（对于类组件）（右侧面板），以及最终呈现您选择的组件的祖先列表。

仅凭这款工具提供的信息，我就觉得它非常有价值，但这还不是全部！你还可以修改所选组件的属性props，hooks这会实时影响网站，这对于调试来说非常有用。🤯

“分析器”选项卡

如前所述，我们可以使用 Profiler 记录每个组件的渲染时间。为此，我们需要点击Start profiling或Reload and start profiling按钮。

网站渲染完成后，我们需要点击Stop profiling按钮，然后会看到一个图表，详细显示每个组件的渲染时间。除了点击Stop profiling按钮之外，我们还可以与网站进行交互，例如点击按钮、菜单等，分析器会在组件级别记录这些交互。

当我们需要调试应用程序的某些交互时，这非常有用。

奖励：检查组件渲染的原因

如果我们有兴趣了解为什么渲染某个特定组件，我们可以通过单击齿轮图标，然后单击“Profiler”选项卡，最后勾选Record why each component rendered while profiling.复选框来激活此功能。

现在，我们需要像之前一样开始新的性能分析，这样我们就可以看到关于组件渲染原因的额外信息。组件（重新）渲染的一些最常见原因如下，您可以使用此工具查看：

• 父组件已渲染
• 它props改变了
• 其与状态相关的hooks改变

我发现，在调试复杂的 React 应用程序时，记录组件渲染的原因可以帮我省去很多麻烦。

工作流调试

在某些情况下，前面提到的工具都无法帮助我们找到错误。在这种情况下，我喜欢使用“工作流调试”方法。这种方法包括从最接近错误发生区域的代码开始分析，并跟踪代码的“上游”流程：哪个方法创建了这段代码，它的父类、祖父类等等。

假设我们应用中某个标题的边距设置错误。我们可以先分析最靠近该标题的代码，寻找可能改变其边距的方法，然后再分析在更高层级上影响该标题的代码，就像一个反向的俄罗斯套娃。

照片由 Didssph 在 Unsplash 上拍摄

调试系统流程

为了确保查找 Bug 的方式保持一致，我们可以结合这些工具和方法，创建自己的流程或框架。例如，在遇到 Bug 时，我们可以：

1. 首先分析影响特定代码部分的代码所遵循的工作流程。
2. 如果没有发现错误，我们可以使用 React Developer Tools 仔细分析每个组件。
3. 如果该分析没有产生结果，我们可以在代码的不同部分应用断点，看看变量是如何改变的。
4. 如果其他方法都失败了，只需注释掉部分代码，看看会发生什么。实验一下。

结论

我们有很多工具可以用来查找错误，但找到它们并不总是那么容易。我认为在调试应用程序时不要感到沮丧，而要专注于系统的、循序渐进的分析代码过程，这一点非常重要。

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

🗞️新闻通讯 - 如果您想了解我的最新文章和有趣的软件开发内容，请订阅我的新闻通讯。

🐦TWITTER——在Twitter上关注 我。