IntelliJ IDEA TypeScript/Отладка Webpack работает только с точками прерывания JavaScript

Я играю с проектом Angular 2/Bootstrap 4/Webpack, чтобы посмотреть, как выстраивается новый материал, и я пытаясь получить отладку для работы в IntelliJ IDEA 15 в Chrome с расширением Chrome JetBrains.

Проблема в том, что любые точки останова, установленные в моих файлах TypeScript, игнорируются. Я использую встроенный транспилер и оставляю выходные файлы JavaScript с тем же именем/местоположением, что и файлы TypeScript, так что my-app.ts находится в той же папке, что и my-app.js, и связанной с ней моей -app.js.map.

Нечетным является то, что если бы я установил точки останова в сгенерированном файле JavaScript, среда IDE затем разрывается в соответствующем месте в файле TypeScript (даже при том, что там нет точки останова). Затем я могу нормально работать, так как отображение, похоже, работает.

Проблема заключается в том, что установка точки останова в файле .ts не устанавливает необходимую точку останова в соответствующем .js файле.

Я делаю что-то неправильно (я никогда не работал с отладкой TypeScript раньше), или это ошибка в IDEA?

P.S. Я получаю те же результаты, будь то удаленная отладка JavaScript или использование локальной отладки через встроенный веб-сервер IDEA.

Ответ 1

Трюк заключался в добавлении ссылки на внутренний URL Webpack на конфигурацию отладки. Путь к использованию для этого URL Webpack будет поступать со вкладки сценариев отладчика при запуске приложения. Вы также можете увидеть его в теге Chrome scripts так же легко, но я включил представление из IntelliJ IDEA здесь:

Вы можете видеть, что путь . в webpack:// соответствует моей папке проекта (о чем свидетельствует путь src). Это сказало мне, что мне нужно использовать путь . для Webpack в конфигурации debug. Если ваш проект отличается от другого, вам придется соответствующим образом настроить.

Что касается webpack:///. (с тремя косой чертой) вместо webpack://., я не могу ответить. Я видел, что использовал в сообщении JetBrains, и это привело меня к этому решению добавления дополнительной косой черты.

Теперь вам нужно создать свою конфигурацию отладки JavaScript и настроить ее следующим образом:

Откорректируйте URL и порт localhost, а также ваш путь сборки (__build__ в моем случае, возможно build или dist в вашем).

Теперь, когда у меня есть настройка конфигурации отладки, как указано выше, она работает нормально.

Ответ 2

Я успешно решил проблему с отладкой с помощью webpack в Intellij/Webstorm на основе этого решения: Как отладить angular 2 приложение, используя angular -cli webpack?. Вам необходимо сопоставить основной каталог и каталог проекта ui с источниками .ts для удаленного URL-адреса, точно так же, как и в решении вверх.

Мой tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "outDir": "../resources/static/out-tsc",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../../../node_modules/@types"
    ]
  }
}