在今年的 MSBuild 会议和 Terminal 1.x、winget 和其他附加功能的发布之后，我想在需要购买新笔记本电脑（Surface Book 3 或 MacBook Pro ...... ）。
问题
使用 WSL2 和 Visual Studio Code 在 Windows 10 上的 Chrome 中调试 Web 应用程序时，断点不起作用。运行调试会话时，会显示消息Breakpoint set but not yet bound。
在 MacOS 上调试时，完全相同的应用程序可以完美运行。
我的设置
MacBook Pro 运行最新版本的 MacOS，并在 BootCamp 下安装了 Windows 10 Pro。
Windows 10 具有运行 Ubuntu 20.04 的 WSL2。终端 1.x 已安装并用于访问 Linux 命令行。
code .Visual Studio Code 是最新的 1.45.1 稳定版本，包括 Windows 10 上的 WSL 远程开发扩展 (0.44.2)。VSCode 通过在项目目录中运行从 WSL2 中启动。
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 - 运行调试会话时会发生什么？
我运行 Create React App 使用npm run start，当我运行 Launch Chrome 调试配置时，它会按预期自动打开 Chrome。
不幸的是，断点被忽略，在 Visual Studio Code 中，断点显示为未填充的圆圈。给出的消息是Breakpoint set but not yet bound。
MacOS - 运行调试会话时会发生什么？
Chrome 打开，控制权转移回 Visual Studio Code，并显示断点信息（例如变量数据、调用堆栈等）。
Win10 - 火狐的作品
有趣的一点，但 Firefox 调试有效。在运行 Firefox 调试会话时，我确实必须在断点触发之前刷新初始页面加载。
断点最初显示错误Unverified Breakpoint。单击它会提示向导将一个添加pathMappings到我的配置中。
Windows 10 上使用的 Firefoxlaunch.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 文档暗示不需要额外的更改，但路径映射需要以不同方式设置。
帮助我，StackOverflow。你是我唯一的希望。
