断点无法通过 Windows 10 和 WSL2 上的 Visual Studio Code 在 Chrome 中调试 React 应用程序

Question

在今年的 MSBuild 会议和终端 1.x、winget 和其他附加功能的发布之后，我想在需要购买新笔记本电脑（Surface Book 3 或 MacBook Pro... ）。

问题

使用 WSL2 和 Visual Studio Code 在 Windows 10 上的 Chrome 中调试 Web 应用程序时，断点不起作用。运行调试会话时，会显示消息断点设置但尚未绑定。

在 MacOS 上调试时，完全相同的应用程序可以完美运行。

我的设置

MacBook Pro 运行最新版本的 MacOS，并在 BootCamp 下安装了 Windows 10 Pro。

Windows 10 有运行 Ubuntu 20.04 的 WSL2。终端 1.x 已安装并用于访问 Linux 命令行。

Visual Studio Code 是最新的 1.45.1 稳定版本，包括 Windows 10 上的 WSL 远程开发扩展 (0.44.2)。VSCode 通过code .在项目目录中运行从 WSL2 中启动。

Chrome 扩展的调试器是 4.12.8

应用程序

该应用程序是一个默认的 Create React App，仅对分配断点进行了很小的更改。

我首先运行：

npx create-react-app sandbox

然后我简化src/App.js并添加了一些任意变量和赋值以用作断点测试。

该App.js文件的内容。

import React from 'react';
import './styles/main.css';

function App() {
  const test = true;
  let temp = 9;
  temp = 10;
  return (
    <div>
      <h1>Breakpoint test</h1>
      <p>Did it work?</p>
    </div>
  );
}

export default App;

我在const和let创建行以及temp.

我的launch.json内容是Create React App editor setup documentation 推荐的。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Win10 - 运行调试会话时会发生什么？

我使用 Create React Appnpm run start运行，当我运行 Launch Chrome 调试配置时，它会按预期自动打开 Chrome。

不幸的是，断点被忽略，并且在 Visual Studio Code 中，断点显示为未填充的圆圈。给出的消息是Breakpoint set but not yet bound。

MacOS - 运行调试会话时会发生什么？

Chrome 打开，控制权转移回 Visual Studio Code，并显示断点信息（例如变量数据、调用堆栈等）。

Win10 - Firefox 工作

有趣的方面，但 Firefox 调试有效。在运行 Firefox 调试会话时，我必须在断点触发之前刷新初始页面加载。

断点最初显示错误Unverified Breakpoint。单击此按钮会提示向导将 a 添加pathMappings到我的配置中。

launch.jsonWindows 10 上使用的 Firefox配置是：

    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
          {
             "url": "http://localhost:3000/home/rando/dev/sandbox/src",
             "path": "${workspaceFolder}/src"
          }
      ]
    }

请注意，这/home/rando/dev/sandbox/src是应用程序在 WSL2 Ubuntu 中的位置。MacOS Firefox 设置是相同的，但没有pathMappings.

结论

在这个阶段，我只能得出结论，这与需要以不同方式设置的路径映射有关，尽管Visual Studio Code WSL 文档暗示不需要其他更改。

帮帮我，StackOverflow。你是我唯一的希望。

Answer 1

我刚刚遇到了这个问题，我想我已经可以为自己工作了。使用.script的命令Debugger for Chrome extension，我看到了以下输出。

\n\n

\xe2\x80\xba http://localhost:3000/static/js/0.chunk.js (/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/static/js/0.chunk.js)\n    - /home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js (/home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js)\n

\n\n

它似乎没有将您的 webroot 附加到推断的本地路径。但${webRoot}/*由于某种原因，使用也不起作用。这样做会导致您的路径重复两次，如下所示。

\n\n

/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js\n

\n\n

但手动写出"/__vscode-remote-uri__/*"似乎可以解决上述重复路径问题。

\n\n

这是我的工作配置launch.json：

\n\n

{\n  "version": "0.2.0",\n  "configurations": [\n    {\n      "name": "WSL Chrome",\n      "type": "chrome",\n      "request": "launch",\n      "url": "http://localhost:3000",\n      "webRoot": "${workspaceFolder}/src",\n      "sourceMapPathOverrides": {\n        "/*": "/__vscode-remote-uri__/*"\n      }\n    }\n  ]\n}\n\n

\n

Answer 2

对于大多数人来说，我正在寻找的问题是 Chrome 或其他浏览器上反映的源映射路径与 vscode 识别的源映射路径之间的差异。在Chrome上运行（ npm start on wsl ）时对我有用的配置如下：

我的具体解决方案：

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "\\mnt\\c\\*": "C:/*"
            }
        }
    ]
}

问题是：如何调试源路径如何转换为 Chrome？

这是一个简单的方法：

1. 使用以下命令启动开发服务器：npm start
2. 使用标准配置以调试模式 (F5) 启动 Chrome（无需包含 sourceMapPathOverrides）
3. 转到 Chrome 开发者控制台 => 来源，
4. 找到您的文件（例如 App.js）并在其中设置断点。

5. 刷新页面，进入vscode。

6. 在文档的同一位置、出现的新文件（在我的例子中为 /mnt/e/）和您的文件中设置断点。

您会发现必须在 sourceMapPathOverrides 中将“\mnt\e”...替换为“E:/”。