Как отладить TypeScript с точкой останова в Jetbrain IDE?

Question

У меня есть угловой интерфейс и экспресс с бэкэндом Typescript.Я хочу отладить обе стороны.Я не смог найти четкого пошагового руководства / видео на , как отлаживать TypeScript с точкой останова в Jetbrain IDE (Webstrom, PhpStorm, ...)? Когда я в Google, я нахожу учебники для Vscode.Я знаю, что первым шагом является создание исходной карты, установив "sourceMap": true, в tsconfig.json, но что дальше?

Answer 1

Вот пошаговая инструкция от настройки совершенно нового проекта TypeScript до его отладки в WebStorm:

1. Создать крошечный проект

   mkdir ts
   cd ts 
   npm install --save typescript source-map-support
   ./node_modules/.bin/tsc --init`
   

2. Убедитесь, что sourceMap установлено в true в вашем tsconfig.json.

3. Создание простого index.ts :

   let i = 1;
   let j = 2;
   let k = i + j;
   console.log(k);
   

4. Откройте проект в WebStorm. Откройте index.ts. Подождите, пока WebStorm завершит индексацию проекта:

4. Откройте настройки WebStorm. Найдите раздел «TypeScript» слева. Убедитесь, что поля «Интерпретатор узла» и «TypeScript» заполнены правильно. Установите флажок «Языковая служба TypeScript» и разрешите WebStorm «Перекомпилировать при изменениях». Нажмите «ОК».

5. На панели инструментов «Выполнить» нажмите «Добавить конфигурацию»:

6. Создайте новую конфигурацию "Node.js":

   

   • Используйте «index.js» в качестве «файла JavaScript». Это должен быть скомпилированный файл, который вы хотите выполнить.
   • В качестве «параметров узла» используйте --require source-map-support/register. Это позволяет получить правильные строки при отладке в WebStorm.

7. Нажмите «ОК».

8. Создайте новую точку останова в вашем index.ts, нажав на боковую панель слева от данной строки:

9. На панели инструментов Выполнить теперь нажмите кнопку отладки. Убедитесь, что в выпадающем меню слева от него выбрана конфигурация запуска:

10. Откроется окно инструмента отладки с остановкой на точке останова: