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

Question

在今年的 MSBuild 大会和 Terminal 1.x、winget 和其他附加功能的发布之后，我想 Windows 10 再次测试运行，然后再购买新的笔记本电脑（Surface Book 3 或 MacBook Pro...这是个问题）。

问题

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

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

我的设置

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

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

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

Chrome 扩展的调试器是 4.12.8

应用程序

该应用程序是一个默认的 Create React 应用程序，只有很小的更改来分配断点。

我从运行宁开始：

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 - 运行调试会话时会发生什么？

我运行使用 npm run start 创建 React 应用程序，当我运行启动 Chrome 调试配置时，它会按预期自动打开 Chrome。

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

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

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

Win10 - Firefox 工作

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

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

在 Windows 10 上使用的 Firefox launch.json 配置是：

    {
      "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 documentation hinting no additional changes are required。

这与需要设置不同的路径映射有关

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

Answer 1

我只是运行喜欢这个，我想我已经为自己工作了。使用 Debugger for Chrome extension 的 .script 命令，我看到了以下输出。

› http://localhost:3000/static/js/0.chunk.js (/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/static/js/0.chunk.js)
    - /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)

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

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

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

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

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

Answer 2

升级到 WSL2 后，我的调试器（仅使用附加）停止工作。

我在 VS Code 上使用“远程 WSL”功能连接到我的 $wsl/Ubuntu/project-path-here + Edge（好的）+ 最新的 VS Code + Win 10 机器所有更新（稳定)

在 vscode 调试控制台上检查 .scripts 显示我的路径仍然很奇怪，没有重复，但仍然很奇怪。

1 - 使用“经典”配置（过去工作得很好）：

"name": "Attach to Edge",
"type": "edge",
"request": "attach",
"port": 9222,
"url": "http://localhost:4300/*",
"webRoot": "${workspaceFolder}"

结果：

webpack:///./src/app/component-one/component-one.component.html (\home\my-username\employer-folder\mono-repo\actual-project\src\app\component-one\component-one.component.html)

2 - 使用这个 post 的第一个答案（也来自 https://github.com/microsoft/vscode-remote-release/issues/2068 and https://github.com/microsoft/vscode-chrome-debug/issues/899）：

"name": "Attach to Edge",
"type": "edge",
"request": "attach",
"port": 9222,
"url": "http://localhost:4300/*",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
   "/*": "/__vscode-remote-uri__/*"
}

结果（使用 c: 看起来不正确）：

webpack:///./src/app/component-one/component-one.component.html (c:\home\my-username\employer-folder\mono-repo\actual-project\webpack:\src\app\component-one\component-one.component.html)

此时我已经尝试了 launch.json 中的每一个组合，甚至尝试混合 $wsl/Ubuntu 以获得完整的正确路径（检查 .scripts) 并且断点始终被禁用。

此外，当我按下附件时，它的速度出奇地快...过去需要一段时间（可能 checking/using 源映射）。

最后做了以下事情（想看看是否会发生同样的事情）：

已将 --start-debugger-server 添加到我的 Firefox Developer 启动配置中
已更新 launch.json，使用新的 FF 附加配置（还安装了 Firefox 扩展调试器）：

"name": "Attach to Firefox",
"type": "firefox",
"request": "attach",
"url": "http://localhost:4300/*",
"webRoot": "${workspaceFolder}",

BINGO，首先尝试...没有额外的路径配置或任何东西，应该的方式和我的 WSL 升级之前的方式（加上不需要端口属性）。

P.S：我会检查我的另一台电脑是否安装了干净的 Windows 10 2004 + WSL2，我认为这可能是“existing/running wsl1 +升级到 wsl2" 东西。

Answer 3

当我放弃尝试使用 Microsoft Edge 时，问题就消失了。继续并安装 Chrome，创建启动配置并成功运行。

Answer 4

对于大多数人来说，我正在寻找的问题是在 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？

这是一个简单的方法：

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

刷新页面并转到vscode。

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

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

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

Breakpoints not working debugging React app in Chrome through Visual Studio Code on Windows 10 and WSL2

reactjs

google-chrome

debugging

visual-studio-code

wsl-2