如何在 VSCode 中调试 React 应用

更新：我发布了一个名为 create-chrome-debugger 的npm 包，它可以创建一个 Chrome 调试器快捷方式，以便在远程调试模式下启动 Chrome。

开发 React 应用（或任何 JavaScript 应用）时，console.log()如果出现运行异常，我通常会大量使用调试工具。只有在遇到非常棘手的问题时，我才会使用 VSCode 的调试器。并非我不喜欢调试器，只是调试 JavaScript 不像调试其他编程语言那样方便。

问题

通常情况下，React 应用通过 `react-scripts start` 启动npm run start/yarn start，运行在localhost:3000，并在文件更改时进行热重载。React 会打开一个新的 Chrome 标签页，我会一直保持这个标签页打开状态。如果需要检查某个变量的值，我会将其输出到控制台，然后在 Chrome 开发者工具中查看输出结果。

另一方面，VSCode 为 JS 应用提供了两种调试选项：在新浏览器窗口中启动调试器，或者将调试器附加到特定浏览器窗口/标签页中已运行的应用。之前我一直只使用第一种方式，即在新窗口中启动调试器，因为第二种方式我一直没能成功。遗憾的是，在新浏览器中启动调试器意味着你必须导航到想要调试的页面，并且会丢失所有状态（例如表单输入）。所以实际上你会得到同一个应用的两个实例。而这正是我一开始没有使用调试器的原因。

然而，我不想再接受这个问题了，决定弄清楚我到底遗漏了什么。以下是我的发现！

使用远程调试启动 React 应用

为了调试 JS 应用，必须启用远程调试来启动浏览器。例如，Chrome 浏览器需要使用 `--resource-debug` 标志启动--remote-debugging-port=9222。在 VSCode 中点击“调试”按钮时，它正是这样做的：它会启动一个新的浏览器窗口并启用该命令行参数。遗憾的是，默认的 React 启动脚本启动的浏览器并不启用远程调试（可能是出于安全考虑？）。
不过，高级配置BROWSER允许我们通过设置两个环境变量 `--resource-debug`和 ` --resource-debug` 来更改浏览器及其启动方式BROWSER_ARGS：

"scripts": {
    "start": "BROWSER='google chrome' BROWSER_ARGS='--remote-debugging-port=9222' react-scripts start",
    ...
}

浏览器的名称取决于操作系统。例如，Chrome 浏览器适用google chrome于 macOS、google-chromeLinux 和chromeWindows 系统。

运行此脚本前，必须完全关闭 Chrome 浏览器。如果 Chrome 浏览器已在您的系统上运行，此 React 启动脚本不会创建新窗口，而是在现有 Chrome 窗口中创建一个新标签页。我的推测是，您在进程级别启用了远程调试，如果您已通过点击图标启动了 Chrome 浏览器，则默认情况下远程调试未启用。因此，当 React 需要启动新窗口时，Chrome 会在内部检查是否可以使用现有窗口，或者是否需要创建新窗口。在我的情况下，它重用了现有的 Chrome 窗口，并且没有启用远程调试。我猜想这也是我无法将 VSCode 调试器附加到正在运行的 React 应用的原因。

始终以远程调试模式启动 Chrome

另一个更便捷的方法是始终启用远程调试来启动 Chrome。在Windows 系统上，操作非常简单，只需右键单击 Chrome 快捷方式，选择“属性”，然后将上述命令行参数添加到“目标”字段中，如下所示：C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 -- "%1"


在 macOS 上就比较复杂了。我在网上找到了两种方法，下面会一一介绍。这两种方法最终都会生成一个新的 Chrome 应用，你可以把它添加到 Dock 栏来替换原来的应用。这相当于一个快捷方式，它会使用命令行参数来启动 Chrome。

创建自定义 Chrome 应用

StackOverflow 上的这个回答介绍了如何仅使用文本编辑器创建一个自定义 Chrome 应用。它还包含一个漂亮的调试图标，可用于区分自定义应用和原始应用。

使用 Automator

Dave Shepard还提供了另一种使用 Automator 创建自定义 Chrome 应用的方法。Automator 是 macOS 的标准工具，用于创建由多个操作组成的应用和工作流。我创建了一个应用，该应用运行一个 shell 脚本来启动 Chrome 并启用远程调试。
请参阅原文博客文章以获取详细说明。

在 VSCode 中进行调试

现在我们已经启动并运行了 Chrome 浏览器，并且启用了远程调试功能，我们可以返回 VSCode 来调试 React 应用了。VSCode 在.vscode/launch.json文件中管理其调试配置：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "urlFilter": "http://localhost:3000/*", // use urlFilter instead of url!
            "webRoot": "${workspaceFolder}"
        }
    ]
}

有两种调试配置。第一种配置会在 http ://localhost:3000创建一个启用远程调试的新 Chrome 窗口，而第二种配置会将调试器附加到现有的 Chrome 窗口。这里需要重点说明的是 `<filename>`port和 `<url>`urlFilter属性。端口号必须与上面命令行参数中的远程调试端口匹配（它不是开发服务器运行的端口，例如 3000）。`<url>` 过滤器表达式会搜索具有此 URL 的页面。

在 VSCode 中，我们可以直接在当前浏览器中渲染的组件上设置断点，然后点击“调试”>“附加到 Chrome”。断点会在组件下次重新渲染时中断，无需在新浏览器窗口中打开。