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

Posted 2023-02-19

【中文标题】断点无法通过 Windows 10 和 WSL2 上的 Visual Studio Code 在 Chrome 中调试 React 应用程序

【英文标题】：Breakpoints not working debugging React app in Chrome through Visual Studio Code on Windows 10 and WSL2

【发布时间】：2020-09-09 05:36:07

【问题描述】：

在今年的 MSBuild 会议和终端 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 命令行。

Visual Studio Code 是最新的 1.45.1 稳定版本，包括 Windows 10 上的 WSL 远程开发扩展 (0.44.2)。通过在项目目录中运行 code . 从 WSL2 中启动 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 editor setup documentation 推荐的我的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 应用程序，当我运行 Launch Chrome 调试配置时，它会按预期自动打开 Chrome。

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

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

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

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，路径映射需要设置不同。

帮助我，***。你是我唯一的希望。

【参考方案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__/*"
      
    
  ]

【参考方案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 - 使用这篇文章的第一个答案（也来自 https://github.com/microsoft/vscode-remote-release/issues/2068 和 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 上检查）和断点始终处于禁用状态。

另外，当我按下附加按钮时，它的速度非常快......过去需要一段时间（可能检查/使用源地图）。

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

在我的 Firefox 开发者启动配置中添加了 --start-debugger-server

更新了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 的电脑，我认为这可能是“现有/正在运行的 wsl1 + 升级到 wsl2”的事情。

【讨论】：

你在哪里添加-start-debugger-server？ Firefox Developer 浏览器的配置文件或在 vscode 中还是？我找不到那部分的任何参考

@eemilk check developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/…，在这里使用Windows，所以右键单击图标，属性，在“目标”值的末尾添加--start-debugger-server。

【参考方案3】：

对于大多数人来说，我正在寻找的问题是在 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 在调试模式 (F5) 下使用标准配置启动 Chrome（无需包含 sourceMapPathOverrides） 转到 Chrome 开发者控制台 => 来源， 找到您的文件（例如 App.js）并在此处设置断点。

刷新页面并转到 vscode。

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

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

【参考方案4】：

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

【讨论】：

问题是关于 Chrome，而不是 Edge。