React调试指南

前端 ,

什么是React调试?

React 调试是查找和解决 React 应用程序中的错误的过程。由于 React 是一个 JavaScript 库，因此 React 调试属于 JavaScript 调试的一种，你可以使用许多与调试常规 JavaScript 代码相同的技术和工具。

除了核心的 React 框架外，你还可能需要调试许多基于 React 的客户端库。一些例子包括用于 Web 用户界面的 MUI (Material UI)、React Bootstrap 和 Fluent UI，用于静态网站生成的 Gatsby 和 Docusaurus，以及用于原生应用开发的 React Native。

调试这些库创建的应用程序时，可以将它们视为常规的客户端 React 应用程序，并使用相同的调试工具和技术（你可以在此处查看调试 React Native 应用程序的指南）。

但是，并非所有 React 应用都在浏览器中渲染。服务器端渲染 (SSR) 是一种流行的 Web 性能优化技术，许多 React 应用都采用了这种技术。

你可以将这些 SSR React 应用程序视为 Node.js 应用程序，并使用 Node.js 的调试工具和最佳实践来解决出现的问题。本指南稍后将讨论的一些 React 调试工具（如 Visual Studio Code 和 Raygun）也允许你调试服务器端渲染的 React 应用程序。

4 种最常见的 React 错误类型

虽然某些 React 错误会抛出错误消息，以便你知道出了什么问题，但也有一些静默错误，只有通过调试和监控才能识别。

React 错误可以归为以下四类之一：

  1. UI 错误
    React 应用由可重用的组件渲染，因此用户界面并不总是如你所料。
    UI 错误通常比较容易识别，因为你可以看到屏幕上某些内容看起来不太对（例如按钮或布局本身）。

  2. 逻辑错误
    逻辑错误是应用程序行为中的错误——换句话说，它没有按预期执行一个或多个操作。
    这些错误更难检测，因为它们不像 UI 错误那样在屏幕上可见，不一定会导致崩溃，也不总是会抛出错误消息。

  3. 网络错误
    网络错误发生在网络请求失败时，导致一个或多个资源无法正确或快速下载。这既适用于发送到你自己的服务器的请求，也适用于第三方资源（如嵌入内容或存储在 CDN 上的静态文件）。
    网络错误还可能由你的 React 应用依赖的第三方服务的异常行为引起——在这种情况下，你需要与服务提供商一起排查问题或找到其他服务。

  4. 回归错误
    回归错误是指过去曾经正常工作的功能，在新代码发布后停止工作。
    迅速增长的 React 应用容易出现这种类型的错误。然而，通过彻底的测试（包括回归测试）和持续的监控，你可以防止新功能导致现有行为的回归。

React 调试前的准备

在调试 React 应用之前，你需要设置以下开发环境：

  • 在你的计算机上安装本地 Node.js 服务器（你可以从 此处 下载 Node.js）
  • 一个 Node.js 包管理器，如 npm 或 Yarn
  • 在项目中安装 React.js 包
  • 一个现有的 React 应用程序（你也可以使用 Create React App 从头开始构建 React 应用）
  • 带有 React 语法高亮的代码编辑器，如 Visual Studio Code
  • 带有开发者工具和隐身模式的网络浏览器，如 Google Chrome

3 个最佳 React 调试工具

1. Chrome DevTools

Chrome DevTools 是一套集成在 Google Chrome 及其他基于 Chromium 的浏览器（如 Vivaldi、Opera 和 Brave）中的高级开发工具。有几种方法可以打开 Chrome DevTools，最简单的是在 Windows 和 Linux 上使用 F12 键，在 Mac 上使用 Fn + F12。

进行调试时，无论是调试 React 还是其他代码，建议始终以隐身模式打开浏览器。这样可以禁用浏览器扩展程序，避免它们影响调试过程（某些扩展可能会向你加载的网页中添加元素或功能）。

以下是我们在 Chrome DevTools 中查看任务跟踪应用程序的示例：

尽管 Chrome DevTools 没有默认的 React 调试工具，但你可以使用其强大的 JavaScript 调试器来调试 React 错误。

Chrome DevTools 提供三个可用于 React 调试的选项卡：

  • Console
  • Sources
  • Network

Console 选项卡本质上是一个常规的 JavaScript 控制台，允许你运行 console.log()、console.warn() 和 console.error() 等控制台语句，就像调试原生 JavaScript 代码时一样。

Sources 选项卡允许你设置断点，或使用 debugger 语句（代码中的断点等效项）来暂停代码执行，而 Network 选项卡则为你提供有关网络错误和性能问题的洞察。

对于 React 调试来说，Sources 选项卡最为重要，因为断点可以让你在任意点暂停代码执行，以便查看代码内部的执行情况。Chrome DevTools 可以显示调用栈和变量，允许你逐条查看语句的执行情况等。

例如，在我们的示例应用中，你可能想查看任务从数据库获取前代码中的执行情况。你只需在任务列表获取之前添加 debugger 语句即可（你可以在任务跟踪应用的 GitHub 仓库中的 App.js 文件里找到以下代码示例）：

1
2
3
4
5
6
7
8
9
// Fetch Tasks
const fetchTasks = async () => {
  debugger;

  const res = await fetch('http://localhost:5000/tasks');
  const data = await res.json();

  return data;
};

在浏览器中，Chrome DevTools 会在 debugger 语句的位置暂停代码执行，此时任务还未加载。

Chrome DevTools 会在 Scope 面板中显示全局和局部变量，并展示该时刻的调用栈，便于你进行分析。

作为 debugger 语句的替代方案，你也可以在 Chrome DevTools 中手动添加断点，使用其内置的断点功能。

你可以使用以下几种类型的断点：

  • 行代码断点（line-of-code breakpoints）
  • 条件行代码断点（conditional line-of-code breakpoints）
  • 日志点（logpoints）
  • DOM 断点（DOM breakpoints）
  • XHR 断点（XHR breakpoints）
  • 事件监听器断点（event listener breakpoints）
  • 捕获和未捕获异常的断点（breakpoints set at caught and uncaught exceptions）
  • 函数断点（function breakpoints）
    2. React Developer Tools
    React Developer Tools 是 Facebook 为 React 调试开发的开源 JavaScript 库。它可作为 Chrome、Firefox 和 Edge 浏览器的扩展使用。

由于 React Developer Tools 是浏览器扩展，无法在隐身模式下运行。然而，这不是问题，因为 React Developer Tools 的设计目的是检查隔离的 React 应用程序的结构和性能，因此不会受到其他扩展程序代码的影响。

需要注意的是，React Developer Tools 不是 Chrome DevTools 的替代品。它允许你从更高层次“查看” React 应用程序的组件和性能，而 Chrome DevTools 则将 React 应用视为普通的网页，供你检查 HTML、CSS 和 JavaScript 文件。

React Developer Tools 会向 Chrome DevTools 添加两个额外的标签：

  • Components：用于查看组件结构
  • Profiler：用于分析应用性能

默认情况下，这两个标签都允许你检查应用程序的开发者版本。

如果你想在生产版本中使用它们进行调试，有几点需要注意：

  • Components 标签确实会在生产模式中显示组件，但组件名称会被抽象（例如，Header 组件可能会显示为 x）。然而，由于应用架构在开发和生产模式下是相同的，因此检查开发版本更容易。

  • Profiler 标签不支持生产版本，这是因为分析会对应用程序增加性能开销，从而影响性能优化的生产版本。虽然可以对生产版本进行分析，但需要在启用分析功能的情况下创建生产版本。

  • Components 标签
    在 Components 标签中，你可以检查屏幕上渲染的每个组件，包括它的子组件、属性、状态和渲染树。

  • Profiler 标签
    要使用 Profiler 标签，需要在应用中执行操作。例如，我将向任务跟踪应用中添加一个任务。为了分析 React 性能，点击“Record”按钮，执行操作，然后再次点击“Record”按钮以停止分析。

    3. Visual Studio Code JavaScript Debugger

    Visual Studio Code (VS Code) 是由微软开发的一款流行的源代码编辑器。它支持多种编程语言，并将许多实用的开发功能集成到一个用户友好的仪表板中。

使用 VS Code 进行 React 调试可以为你提供一个强大的工作流程，因为你几乎可以在代码编辑器中完成所有操作。例如，你可以打开多个终端实例，使用 IntelliSense 和 React 语法高亮编写代码，将工作提交到 GitHub，调试应用程序等等。

VS Code 通过扩展提供 JavaScript 调试器，你有多种选项可以选择。你可以通过点击左侧（垂直）菜单中的扩展图标，在代码编辑器中查找并下载它们。

我将以 Microsoft 的 JavaScript Debugger 扩展为例，该扩展允许你调试在 Chrome 上运行的客户端 React 应用程序以及在 Node.js 服务器上运行的服务端 React 应用程序：

安装 JavaScript Debugger 扩展到代码编辑器后，你可以通过点击最左侧菜单中的 “运行和调试” 图标来打开它。
要运行调试器，你需要创建一个 launch.json 配置文件。要创建此文件，请点击 “运行和调试” 按钮：

然后，选择你要使用的调试器应用程序（在调试示例应用程序时，我选择了“Web App Chrome”选项）：

VS Code 会自动将 launch.json 文件添加到你的 React 应用程序文件夹中。

请注意，你可能需要更改默认配置文件中的某些内容。对于我们的示例应用程序，我使用了以下设置（webRoot 是应用程序代码所在的位置——使用 Create React App 创建的应用程序会将代码放在 src 文件夹中）：

1
2
3
4
5
6
7
8
9
10
11
12
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

保存文件后，VS Code 会在左侧的调试面板中添加一个“Launch Chrome”按钮。点击它，VS Code 将以调试模式打开 Chrome。

现在，你可以在代码编辑器中设置断点来暂停代码执行，使用调试工具栏逐步执行或进入函数，检查调用堆栈等。

你也可以打开Chrome DevTools来查看代码执行，确实，暂停在我们在Visual Studio code中添加断点的那一行:

你可能会发现，使用 Visual Studio Code 进行 React 调试相比 Chrome DevTools 更加高效，因为你不需要在浏览器和代码编辑器之间切换来修改代码，并且可以使用 IntelliSense、预设的浏览器断点以及其他强大的功能。

然而，另一方面，Chrome DevTools 提供了许多 VS Code 中没有的预定义断点类型，让你可以更灵活地进行调试。

React 调试总结

要开发和维护高性能的 React 应用，调试是工作流程中不可或缺的一部分，涵盖开发和生产阶段。

为了获得最佳效果，可以使用多种 React 调试工具。例如，在开发过程中可以使用 VS Code 的 JavaScript 调试器和 React Developer Tools，而在部署后可以使用 Raygun4JS 来识别和诊断 React 的错误。

如果你在 React 调试中遇到困难或需要快速修复，也可以使用常规的 JavaScript 调试技术，如 console 语句。此外，遵循 DevOps 实践可以帮助你建立和维护一个通用的开发工作流程，从而预防错误并减少调试工作量。

涅槃快乐热爱生活，追求技术

个人简介。