在今年的MSBuild会议和终端1.x、winget和其他额外功能的宣布之后，我想在需要购买新笔记本电脑（Surface Book 3或MacBook Pro. a.. a.这是一个问题）之前再给予Windows 10一次测试运行。
问题
使用WSL 2和Visual Studio代码在Windows 10上的Chrome中调试Web应用时，断点不起作用。运行调试会话时，显示消息断点已设置但尚未绑定。
在MacOS上调试时，完全相同的应用程序工作完美。
我的设置
运行最新版本MacOS的MacBook Pro，并在BootCamp下安装了Windows 10 Pro。
Windows 10有运行Ubuntu 20.04的WSL 2。终端1.x已安装并用于访问Linux命令行。
Visual Studio Code是最新的1.45.1稳定版本，包括Windows 10上的WSL远程开发扩展（0.44.2）。通过在项目目录中运行code .，可以从WSL 2中启动VSCode。
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的重新赋值上放置了一个断点。
Create React App编辑器安装文档推荐的我的launch.json内容。
{
"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运行Create React App，当我运行Launch Chrome调试配置时，它会按预期自动打开Chrome。
遗憾的是，断点被忽略，并且在Visual Studio代码中，断点显示为未填充的圆圈。给出的消息是断点已设置但尚未绑定。
MacOS -运行调试会话时会发生什么？
Chrome打开，控制权转移回Visual Studio代码，并显示断点信息（例如变量数据、调用堆栈等）。
Win10 - Firefox可以正常工作
有趣的侧面点，但Firefox调试工作。当运行Firefox调试会话时，我必须在断点触发之前刷新初始页面加载。
断点最初显示错误“未验证的断点”。单击该错误将提示向导向我的配置中添加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是应用程序在WSL 2 Ubuntu中的位置。MacOS Firefox的设置是相同的，但没有pathMappings。
结论
在这个阶段，我只能得出结论，这与需要设置不同的路径Map有关，尽管Visual Studio Code WSL文档提示不需要进行其他更改。
帮帮我，StackOverflow，你是我唯一的希望
5条答案
按热度按时间3j86kqsm1#
我刚刚遇到了这个，我想我已经让它为我自己工作了。使用
Debugger for Chrome extension的.script命令，我看到了下面的输出。看起来它并没有把webroot附加到推断出的本地路径上。但是由于某些原因，使用
${webRoot}/*也不起作用。这样做会导致路径重复两次，如下面的结果所示。但是手动写出
"/__vscode-remote-uri__/*"似乎可以绕过上面的重复路径问题。下面是我的
launch.json工作配置：hivapdat2#
对于大多数人来说，我所面临的问题是Chrome或其他浏览器上反映的源Map路径与vscode识别的源Map路径之间的差异。我在Chrome上运行的配置（npm start onwsl）如下所示：
我的解决方案：
.vscode/launch.json问题是：如何调试源路径如何转换为Chrome？
下面是一个简单的方法：
1.使用以下命令启动开发服务器：npm启动
1.使用标准配置在调试模式（F5）下启动Chrome（无需包含sourceMapPathOverrides）
1.进入Chrome开发者控制台=〉源代码，
1.找到您的文件（例如App.js）并在那里设置断点。
1.重新整理页面并移至vscode。
1.在文档的相同位置、出现的新文件（在我的例子中是/mnt/e/）和您的文件中设置断点。
您会想到必须在sourceMapPathOverrides中将“\mnt\e...”替换为“E：/”。
a9wyjsp73#
升级到WSL 2后，我的调试器（仅使用attach）停止工作。
$wsl/Ubuntu/project-path-here+ Edge（好的一个）+最新的VS代码+带所有更新的Win 10机器（稳定）*在vscode调试控制台上检查
.scripts发现我的路径仍然很奇怪，不重复，但仍然很奇怪。1 -使用“经典”配置（过去运行良好）：
结果是：
2 -使用此帖子的第一个答案（也来自https://github.com/microsoft/vscode-remote-release/issues/2068和https://github.com/microsoft/vscode-chrome-debug/issues/899）：
会导致出现以下情况（与c：用法）：
在这一点上，我已经尝试了launch.json中的每一个组合，甚至尝试混合**$wsl/Ubuntu**以获得完整的正确路径（在
.scripts上检查），断点总是被禁用。此外，当我按下附加它是奇怪的快...它曾经需要一段时间（可能检查/使用源Map）。
最后做了以下事情（想看看是否会发生同样的事情）：
--start-debugger-serverlaunch.json（还安装了Firefox扩展的调试器）：宾果，第一次尝试...没有额外的路径配置或任何东西，它应该是和我的WSL升级之前的方式（加上不需要端口属性）。
我会检查我的另一台电脑，有一个干净的Windows 10 2004 + WSL 2安装，我想这可能是一个“现有的/运行的wsl 1+升级到wsl 2”的事情。
qyyhg6bp4#
在launch.json上指定webRoot可以正常工作。
或webRoot路径可能所在的其他文件夹。
https://code.visualstudio.com/docs/nodejs/browser-debugging
v440hwme5#
在我放弃尝试使用微软Edge的那一刻，这个问题就消失了。继续安装Chrome，创建了一个启动配置，它工作了。