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

Question

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

问题

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

在 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 应用程序，只有一个小的更改来分配断点。

我首先运行:

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

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

不幸的是，断点被忽略，在 Visual Studio Code 中，断点显示为未填充的圆圈。给出的消息是 已设置断点但尚未绑定(bind) .

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

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

Win10 - Firefox 工作

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

断点最初显示错误 未验证断点 .单击它会提示向导添加 pathMappings到我的配置。

火狐 launch.json Windows 10 上使用的配置是:

    {
      "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 .

帮助我，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__/*"
      }
    }
  ]
}