Точки останова не работают при отладке приложения React в Chrome с помощью кода Visual Studio в Windows 10 и WSL2

Question

После конференции MSBuild в этом году и объявления Терминала 1.x, winget и других дополнений, я хотел провести еще один тестовый запуск Windows 10 перед покупкой нового ноутбука (Surface Book 3 или MacBook Pro... вот в чем вопрос)).

Проблема

Точки останова не работают при отладке веб-приложений в Chrome в Windows 10 с использованием WSL2 и Visual Studio Code. При запуске сеанса отладки отображается сообщение " Точка останова установлена, но еще не связана".

То же самое приложение безупречно работает при отладке в MacOS.

Моя установка

MacBook Pro с последней версией MacOS с Windows 10 Pro, установленной в BootCamp.

В Windows 10 WSL2 работает под управлением Ubuntu 20.04. Терминал 1.x установлен и используется для доступа к командной строке Linux.

Visual Studio Code - это последняя стабильная версия 1.45.1 и включает расширение удаленной разработки WSL (0.44.2) в Windows 10. VSCode запускается из WSL2 путем запуска code . в каталоге проекта.

Отладчик для расширения 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 contents as recommended by the 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 - What happens when running a Debug session?

I run the Create React App using npm run start and when I run the Launch Chrome debug config it automatically opens Chrome as expected.

Unfortunately, the breakpoints are ignored and inside Visual Studio Code the breakpoints are shown as unfilled circles. The message given is Breakpoint set but not yet bound.

MacOS - What happens when running a Debug session?

Chrome opens and control is shifted back to Visual Studio Code with the breakpoint information showing (e.g. variables data, call stack, etc).

Win10 - Firefox works

Интересный момент, но отладка Firefox работает. Однако при запуске сеанса отладки Firefox мне нужно обновить начальную загрузку страницы до срабатывания точки останова.

Точка останова изначально показывала ошибку Непроверенная точка останова. При нажатии на эту кнопку мастер предлагал добавитьpathMappings в мой конфиг.

Firefox 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 намекает, что дополнительных изменений не требуется.

Помогите мне, Stackru. Ты моя единственная надежда.

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}/*тоже по какой-то причине не работает. Это приведет к тому, что ваш путь будет повторяться дважды, как показано ниже.

/__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 (запуск npm на 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?

Вот простой способ:

1. Запустите сервер разработки с помощью: npm start
2. Запустите Chrome в режиме отладки (F5) со стандартной конфигурацией (не нужно включать sourceMapPathOverrides)
3. Перейдите в консоль разработчика Chrome => Источники,
4. Найдите свой файл (например, App.js) и установите там точку останова.

5. Обновите страницу и перейдите в vscode.

6. Установите точку останова в том же месте документа, в новом появившемся файле (/ mnt / e / в моем случае) и в вашем файле.

Вы поймете, что вам нужно заменить "\ mnt \ e" ... на "E: /" в sourceMapPathOverrides.

Answer 3

Указание webRoot на launch.json сработало. Что-то вроде

      "webRoot": "${workspaceFolder}/src/js"

или другую папку, которой может быть ваш путь webRoot.

https://code.visualstudio.com/docs/nodejs/браузер-отладка

Answer 4

После обновления до WSL2 мой отладчик (только с подключением) перестал работать.

Я использую функцию "Удаленный WSL" в VS Code, подключаюсь к моему $wsl/Ubuntu/project-path-here + Edge (хороший) + Последний код VS + Машина Win 10 со всеми обновлениями (стабильная)

Проверка .scripts на консоли отладки vscode показывает, что мои пути все еще странные, не повторяющиеся, но все еще странные.

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), а точка останова всегда отключена.

Кроме того, когда я нажимаю прикрепление, это происходит странно быстро... это занимало некоторое время (вероятно, проверка / использование исходных карт).

В итоге сделал следующее (хотел посмотреть, произойдет ли то же самое):

• Добавлено -start-debugger-server в мою конфигурацию запуска разработчика Firefox

• Обновлено launch.json с новой конфигурацией прикрепления для FF (также установлен отладчик для расширения Firefox):

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

BINGO, сначала попробуйте... никаких дополнительных конфигураций пути или чего-то еще, так, как должно быть и как было до моего обновления WSL (плюс нет необходимости в атрибуте порта).

PS: Я проверю на своем другом компьютере, на котором установлена ​​чистая Windows 10 2004 + WSL2, я думаю, что это может быть "существующее / запущенное обновление wsl1 + до wsl2".

Answer 5

В моем случае мне нужно было обновитьwebRootатрибут в . Мое приложение реагирования находилось в /services/web/, поэтому моеlaunch.jsonвыглядит так:

        "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/services/web/"
    }
  ]
}

Answer 6

Проблема исчезла для меня в тот момент, когда я отказался от попыток использовать Microsoft Edge. Пошел вперед и установил Chrome, создал конфигурацию запуска, и она сработала.