#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:
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:
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:
теперь точка останова будет работать!