Отладчик JavaScript (машинопись) улавливает точку останова в src/*, но не в src/**/*

#javascript #typescript #debugging #webstorm #javascript-debugger

Вопрос:

Я не уверен, почему, но точки останова в сеансе отладки JavaScript, из которых любой файл src/* будет работать, но не включен src/**/* .

Среда разработки: WebStorm 2021.1.3

Я использовал это для отладочных конфигураций.

Структура файла:

введите описание изображения здесь

Конкретный пример: точка останова включена Xarrow.tsx будет работать, но не включена /utils/paths.ts . Я попытался переехать paths.ts src , и тогда это сработало. Похоже, что среда IDE не ищет точки останова в src/**/ папках.

Как настроить WebStorm для поиска точек останова также во вложенных папках?

Не уверен, что это уместно, но обратите внимание:

  • Я запускаю пример проекта (create-react-app), который использует связанный пакет (ссылка на пряжу) (react-xarrows).
  • Эта src папка, которую я пытаюсь отладить, является папкой src связанного пакета. Может быть, WebStorm не просматривает вложенные папки в связанном пакете?

Обновить

TLDR;

typescript генерирует неправильные пути( sources свойство в файлах .js.map) для файлов исходных карт при использовании связанных пакетов. понял, как это исправить, но typescript продолжает перезаписывать мои исправления всякий раз, когда меняется один из исходных файлов, поэтому я преобразовал одну проблему в другую.

Подробные сведения

Это действительно раздражало меня, поэтому я исследовал дальше:

рассмотрим следующее дерево папок:

введите описание изображения здесь становится=> введите описание изображения здесь

the compiled lib includes source-map files.

the browser only knows how to run javascript so eventually what would be loaded is:

enter image description here

but we want to debug the source(typescript) and not the compiled javascript so we add source map and when the browser will see it, the static files tree in the browser becomes:

enter image description here

now note! here’s the problem,
from the root folder point of view( D:Eliavprojectsgit projectsreact-xarrows ):

  • ./lib/* => ./src/* (correct)
  • ./lib/Xarrow/* => ../src/Xarrow/* (not correct!)
    should be ./lib/Xarrow/* => ./src/Xarrow/*

if I will look it the ./lib/Xarrow/Xarrow.js.map:

 //./lib/Xarrow/Xarrow.js.map
{
  "sources": [
    "../../src/Xarrow/Xarrow.tsx" //wrong! should be "../src/Xarrow/Xarrow.tsx"
  ],
}
 

let’s fix this specific map and look in the browser:

введите описание изображения здесь

теперь точка останова будет работать!