后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何使用 VS Code 调试 React 应用 - 提高调试效率
调试 React 应用可能是一个缓慢而痛苦的过程。你需要console.log()不断添加语句，直到最终找到正确的位置。或者更高级的做法是：在 Chrome 开发者工具中设置断点和在 IDE 中编辑代码之间来回切换，直到错误修复。
但有了合适的工具和策略性的方法，调试就会变得容易得多。甚至可能很有趣？！
事实证明，备受喜爱的 VS Code 让直接从 IDE 调试 React 应用变得非常简单。结果：超级简单的设置和更高效的调试工作流程。
在此页面上，您可以了解如何将 VS Code 设置为 React 应用的调试器，并查看其实际运行情况。我们将使用 Next.js 应用程序调试一个小问题，并使用（条件）断点、单步执行函数以及直接从 VS Code 检查和编辑变量。所有这些操作都与结构化调试方法相结合，可以快速修复错误。
这里有一段简短的视频，演示了如何设置和使用 VS Code 调试器。或者，您也可以在本页面找到包含屏幕截图的详细分步教程。
目录
通过 VS Code 启动 Chrome
使用 VS Code 调试器调试 React 应用非常简单。VS Code 会为launch.json你创建一个配置，然后稍作调整即可。你可以.vsocde在仓库的文件夹中找到该文件。
根据您的应用，您需要
- 调整
url字段（这里我将端口改为3000） - 调整
webRoot条目（例如，如果您的代码位于srccreate-react-app apps 之类的文件夹中，则您将其更改${workspaceFolder}为${workspaceFolder}/src）
现在，您可以点击播放按钮▶️，以调试模式启动 Chrome 浏览器。VS Code 调试器会自动连接到此浏览器。
注意：您可以手动以调试模式运行 Chrome，并使用“attach”启动配置来连接 VS Code 调试器。但我认为没有必要把事情搞得太复杂。
如果您已经有一个launch.json文件或想要向其中添加另一个配置，您可以简单地使用 Intellisense（例如在 Mac 上按 cmd + 空格）并获得建议。
这是我的launch.json文件：
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
使用 VS Code 调试器
两次使用调试器你需要两样东西：
- 运行你的 React 应用程序（例如通过运行
npm start）。 - 通过按下播放按钮▶️通过 VS Code 启动 Chrome。
现在，您可以像在 Chrome 开发者工具中一样使用调试器。如果您不熟悉，可以查看下面的示例。
VS Code 调试器的实际应用
假设以下情况：我们是一名开发者，正在开发一个正在生产中的 Next.js 应用。对于真实的用户来说，一切都不应该受到影响。
其中一个最重要的页面曾经看起来像这样（您可以在此处看到它的部署版本）：
但突然我们收到报告说有些东西坏了（这里是已部署的版本）：
该死，这个 bug 是怎么跑到生产环境里的？我们的客户都气炸了。他们花了不少钱，而且依赖我们的应用。显然，我们的经理也快疯了。
但作为开发人员，我们保持冷静。只要采用正确的调试方法，我们很快就能修复这个错误。
生产环境中的错误信息并没有告诉我们太多信息。所以我们首先在本地机器上运行该应用程序。
因为我们知道我们需要调试代码，所以我们使用 VS Code 调试器来启动 Chrome 实例。
这将按照 launch.json 中的定义在localhost:3000打开浏览器。
现在，当我们导航到有问题的页面时，我们会看到此错误。
在 VS Code 中使用断点
这个错误比我们在生产网站上看到的要好得多。它为我们提供了两条重要信息：
- 错误消息“无法读取 null 的属性”。
- 文件名和发生错误的行：第 49 行
issue-row.tsx。
在 VS Code 中打开该文件非常简单。错误消息中的文件路径实际上是一个链接：
当我们单击它时，文件issue-row.tsx将在 VS Code 中打开。太神奇了。
错误消息告诉我们，该issueprop 可能null在某个时刻出现。让我们通过添加断点来验证这一点。只需在行号旁边的空白处点击一下即可。
按下绿色的“重新启动”按钮↻后，页面就会刷新。
为了加快处理速度，您还可以使用组合键（我使用的是 Cmd + Shift + F5）。您可以将鼠标悬停在按钮上，查看您的组合键。
代码执行在断点处停止。同时，网站冻结在加载状态。
正如您在上面的屏幕截图中看到的，issue道具是在第一次渲染期间定义的。
于是我们按了几次“继续”按钮⏯️或F5。问题是有相当多的IssueRow组件需要渲染。所以，一直点击“继续”直到找到正确的问题，很快就会变得很烦人。
条件断点来拯救
我们不想一直点击“继续”，而是想跳过所有已定义的问题，只停留在无效的问题上。
最简单的方法是给断点添加条件。右键单击断点，然后选择“编辑断点”。
现在我们可以输入一个 JavaScript 表达式。在本例中，我们希望在 处停止issue === null。
我们按下回车键并继续执行代码。瞧，我们可以确认至少有一个问题null。
说实话，这对我们来说不是什么新鲜事，因为我们从错误信息里就已经知道了。但至少我们能够确认问题的存在。
寻找根本原因
让我们深入挖掘一下。在一个简单的 JavaScript 程序中，我们只需跟踪调用堆栈或按下“Step Out”按钮（⬆️）就能找到问题的根本原因。
但对于 React（和其他框架）来说，这并不容易：
除了IssueRow我们在“调用堆栈”面板中看不到任何代码文件之外，其他所有内容都是 React 内部文件。
这对我们没什么帮助。
因此，很遗憾，我们需要手动找出IssueRow组件的渲染位置。VS Code 的全局搜索功能在这里是我们最好的帮手。
我们打开文件并在组件的返回语句之前添加另一个断点。
然后点击调试控件中的刷新按钮↻或F5。
太好了，现在我们看到数组中的一个项目items确实是null。
在调试器中检查和编辑变量
我们假设这个null值导致了错误。但在开始修改代码之前，我们可以通过在调试器中编辑这个变量来轻松验证这个假设。
现在，当我们继续执行代码时，我们可以看到网站上的错误消失了。问题列表中的第 7 和第 8 项现在如预期的那样重复了。
这验证了我们的假设，即null数据数组中的值是有问题的。
这样，我们解决这个问题就变得简单了：我们只需null从数据中过滤掉所有值即可修复该错误。当然，我们可以在组件中实现过滤功能。但也许更靠近数据源的地方更合适。这样，其他（未来的）组件也有可能从相同的修复中受益。
进入函数
为了更深入地了解，我们来看看组件的开头。items包含null值的数组来自issuePage变量。而这个变量来自一个钩子。
因此，我们在这里设置另一个断点，然后再次点击刷新按钮。代码执行将在断点处停止。
现在我们可以使用“单步执行”按钮⬇️来调查这个钩子。打开的第一个文件仍然是一些 React 内部文件。
但这次我们的情况好多了。按了几次“进入”按钮后，我们终于进入了useIssues钩子。
仔细观察后发现，该getIssues函数似乎是过滤数据的良好选择。
不幸的是，由于某种原因，我们既无法单步执行该getIssues函数，代码执行也无法在函数内部的断点处停止。如果你有一点调试经验，就会知道这类麻烦时有发生。
无论如何，我们不能让这阻碍我们。我们添加了一些代码来过滤问题。
一旦我们按下回车键，我们就可以确认错误已被修复。
提交、推送、部署。皆大欢喜。
