Невозможно отладить Angular с помощью WebStorm

Question

У меня есть приложение Angular (Angular 2), которое я могу запустить без проблем из WebStorm, однако, когда я пытаюсь установить точки останова, ни одно из них никогда не срабатывает. WebStorm сообщает, что отладчик подключен и что веб-пакет успешно скомпилирован. Я открываю свой браузер для localhost: 4200, и мое приложение загружается нормально, просто ни одна из моих точек останова не была достигнута. У меня также установлено расширение JetBrains IDE, но, насколько я понимаю, оно больше не нужно.

Answer 1

Шаг 1: Нажмите в правом верхнем углу раскрывающегося списка> изменить конфигурацию

Шаг 2: В конфигурации отладки при запуске> нажмите *Символ 1008 * и выберите Отладка Javascript

Шаг 3. Убедитесь, что вы создали новый профиль в разделе Отладка Javascript (В моем случае имя профиля - Angular Applicaiton> URL: http://localhost:4200

Шаг 4: После того, как все настроено правильно, убедитесь, что вы выбрали правильный профиль из выпадающего меню, какниже

Шаг 5: Убедитесь, что вы обслуживаете свое приложение через ng s в терминале, затем нажмите кнопку «Отладка» (помните, что не нажимайте на игрузеленая кнопка). Нажмите красную кнопку ошибки, как показано на скриншоте выше.

Теперь откроется localhost: 4200 в новом окне

Примечание. Убедитесь, что вы добавили достаточно точек останова в файл ts. чтобы отладить его

Теперь ваши контрольные точки точно будут работать.

Answer 2

Я наконец заставил его работать после долгих проб и ошибок.

1. Я настроил конфигурацию отладки, используя шаблон "npm" WebStorm (снимок экрана ниже). Вы можете игнорировать параметр Script на скриншоте, так как это просто псевдоним (находится в package.json), указывающий на файл JSON, который содержит прокси для внешних конечных точек API (DEV, Production, Stage и т. Д.)
2. Fromздесь я мог запустить мое приложение Angular, и веб-пакет скомпилировал бы все
3. . На этом этапе мое приложение будет работать нормально, но не будет достигнуто никаких точек останова. Затем я установил расширение Chrome поддержки JetBrains IDE. После установки я щелкнул правой кнопкой мыши по расширению и выбрал опцию «Проверять в WebStorm». В этот момент среда IDE WebStorm открыла второе окно DEBUG с именем «localhost: 4200». Все установленные мной точки останова срабатывали всякий раз, когда я их запускал.

Таким образом, они были ключом к поддержке JetBrains IDE Chrome Extension. Насколько я понимаю, в новых версиях WebStorm это больше не нужно, но, похоже, для отладки моего приложения Angular это все еще необходимо. Его можно скачать в магазине расширений Chrome здесь .

Надеюсь, это поможет кому-то еще, потому что это меня долго сводило с ума.

Конфигурация отладки NPM

Компиляция веб-пакета

Окно отладки на http://localhost:4200