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

Question

经过今年的MSBuild会议，以及终端1.x、winget和其他附加设备的发布，我想在需要购买一台新笔记本之前，再进行一次测试(Surface 3或MacBook Pro...that是问题所在)。

The Issue

当使用WSL2和Visual代码在Windows 10上调试Chrome中的web应用程序时，断点无法工作。运行调试会话时，将显示消息断点集(但尚未绑定)。

在MacOS上调试时，完全相同的应用程序工作得完美无缺。

我的设置

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

Windows 10使WSL2运行Ubuntu20.04。终端1.x被安装并用于访问Linux命令行。

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

Chrome扩展的调试器为4.12.8

应用程序

该应用程序是一个默认的，只需对分配断点进行小的更改。

我从跑步开始：

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内容是由创建React编辑器安装文档推荐的。

{
  "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，当我运行启动Chrome调试配置时，它会按预期自动打开Chrome。

不幸的是，断点被忽略，在Visual代码中，断点显示为未填充的圆圈。给出的消息是断点集，但尚未绑定。

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

Chrome打开并将控件移回Visual代码，显示断点信息(例如变量数据、调用堆栈等)。

Win10 - Firefox works

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

断点最初显示错误未验证的断点。单击此按钮会促使向导将pathMappings添加到我的配置中。

Windows 10上使用的火狐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火狐的设置是相同的，但没有pathMappings。

结论

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

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

Answer 1

我刚碰到这件事，我想这是我自己干的。使用.script命令的Debugger for Chrome extension，我看到了下面的输出。

› 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

对于大多数人来说，我所关注的问题是Chrome或其他浏览器所反映的源代码路径与vscode识别的源代码路径的不同。在运行Chrome (wsl上的npm)时，为我提供的配置如下：

我的特殊解决方案：

.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启动开发服务器
2. 启动具有标准配置的调试模式下的Chrome (F5)(不需要包括sourceMapPathOverrides)
3. 转到控制台=>源代码，
4. 找到您的文件(例如App.js)并在那里设置一个断点。

​

​

1. 刷新页面并转到vscode。

​

​

1. 在文档的同一位置、出现的新文件(/mnt/e/在我的示例中)和您的文件中设置一个断点。

​

​

你会想到你必须替换“\mnt\e”.在sourceMapPathOverrides中带有"E:/“。

Answer 3

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

我正在使用VS代码上的“远程WSL”功能，连接到我的$wsl/Ubuntu/project-path-here + Edge (好的)+最新的VS代码+ 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)

https://github.com/microsoft/vscode-chrome-debug/issues/899): 2-在本文中使用第一个答案(也来自 https://github.com/microsoft/vscode-remote-release/issues/2068 和)

"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上签入)，并且断点总是被禁用的。

而且，当我按下附件时，它会非常快.它过去需要一段时间(可能会检查/使用源映射)。

最后执行了以下操作(希望查看是否会发生相同的情况)：

• 将--start-debugger-server添加到火狐开发人员的启动配置中
• 更新后的launch.json具有新的FF附加配置(还安装了火狐扩展的调试器)：
• ​

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

宾果，先试试.没有额外的路径信任或任何东西，它应该是什么样子，以及它在我的WSL升级之前的方式(加上不需要端口属性)。

P.S:我会查看另一台安装了干净的Windows 10 2004 + WSL2的pc机，我认为这可能是“现有的/正在运行的wsl1 +升级到wsl2”的问题。