VS Code или Chrome Dev Tools: отладка рабочих пространств NPM (monorepo) TypeScript + React code

0

У меня есть установка монорепозитория с использованием рабочих пространств NPM. Выглядит это примерно так:

  • Программы
    • мое приложение-реакция
  • пакеты
    • общий пакет

Оба my-react-appи shared-packageпереписаны на TypeScript. Приложение My React запускается на localhost: 3000. Я могу использовать как инструменты разработчика Chrome, так и отладчик VS Code для взлома кода внутри основного приложения React (файлы ts и tsx my-react-app), но я не могу получить точку останова shared-package.

Инструменты разработчика Chrome

Я могу видеть shared-packageфайлы TypeScript в Chrome Dev Tools (через исходные карты), но точки останова там никогда не достигаются.

Отладчик кода VS

Со следующей конфигурацией внутри launch.json:

{
  "name": "Launch Edge",
  "request": "launch",
  "type": "pwa-msedge",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

Я могу получить точки останова, my-react-appно не могу shared-package.

Как я могу получить точки останова в монорепозиторном пакете с помощью инструментов Chrome Dev Tools или отладчика VS Code?

3
  • Извините, если это очевидно, но как запускается код из общих пакетов? Как импорт в реактивном приложении, которое отслеживает отладчик? 27 окт в 4:06
  • @SethLutske, да, именно так. Приложение React импортирует скомпилированный файл JavaScript. Вместе со скомпилированным файлом JavaScript есть карта исходных текстов, указывающая на исходный файл TypeScript. Я предоставил более подробную информацию о моей настройке здесь: stackoverflow.com/q/66785791/188740 2 дня назад
  • Ах. Проблема, вероятно, в том, что, хотя вы видите свои точки останова в исходной карте, на самом деле это не тот код, который запускает хром. Посмотрите, как использовать точки останова в исходных картах (Chrome DevTools) , вы можете найти там некоторые подсказки 2 дня назад