В этой статье я хочу показать вам, как WebStorm может отлаживать код TypeScript. Как вы знаете, код TypeScript должен быть скомпилирован в JavaScript перед запуском в браузере или NodeJS. После компиляции код уже не будет прежним. Если вы хотите поставить точку останова и проверить значения переменных, вы должны сообщить отладчику, где он должен остановиться. Как это сделать?
Я создам проект с нуля и покажу, как заставить работать отладчик WebStorm.
Короче говоря: вам нужно установить для параметра sourceMap в tsconfig.json значение true. Он сообщит tsc о создании исходных карт, и это поможет WebStorm узнать, где остановиться, если вы поставите точку останова.
Настройте проект TypeScript
Во-первых, вы должны установить NodeJS и WebStorm, чтобы все скрипты для команд работали. Кроме того, все команды терминала могут не работать в системах Windows. И еще один важный момент. Конечно, вы можете отлаживать с помощью console.log и не использовать какой-либо внешний отладчик. Тем не менее, я должен сказать, что иногда сложность программы делает отладку console.log довольно сложной. Лучше иметь в кармане несколько инструментов, которые позволят вам использовать больше энергии.
Сначала создадим пустой проект. Мы можем создать каталог и инициализировать там npm с помощью следующих команд.
# create directory mkdir typescript-debug-webstorm # go inside directory cd typescript-debug-webstorm # initialize empty npm project npm init -y
Чтобы заставить TypeScript работать, нам нужно установить его и инициализировать. Давайте сделаем это.
# installing TypeScript npm i --save-dev typescript # initialize default configuration npx tsc --init
Теперь я хотел бы настроить базовую структуру каталогов. Я предпочитаю использовать каталог src для файлов TypeScript и каталог dist для скомпилированного кода.
# create both directories mkdir src mkdir dist
Теперь пришло время отредактировать конфигурацию TypeScript и заставить ее работать как исключение с моими каталогами. Откройте каталог в WebStorm, а затем откройте файл tsconfig.json. После этого нам нужно немного отредактировать его, чтобы он работал с моей предпочтительной структурой каталогов.
Компилятор TypeScript будет сканировать каталог src по умолчанию. Что касается distdirectory, нам нужно отредактировать параметр outDir. Найдите его в файле, удалите комментарий и измените его на ./dist.
Теперь пришло время протестировать нашу настройку, прежде чем мы перейдем к отладке. Давайте создадим простой файл index.ts внутри каталога src.
И вот код.
function main() {
console.log('Hello World! We will setup TypeScript debugging in WebStorm!');
}
main();
Давайте скомпилируем его и запустим, выполнив следующие команды.
# compile source (you could also just run tsc) npx tsc # run node dist/index.js
Хороший! В результате вроде все работает. Но отметил, что давайте настроим еще одну вещь, прежде чем мы перейдем к отладке. Я говорю о командах npm. Откройте файл package.json и добавьте несколько команд в раздел сценариев. Вот мой результат в файле package.json.
{
"name": "typescript-debug-webstorm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx tsc",
"prestart": "npm run build",
"start": "node dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": { "typescript": "^4.9.5" }
}
Как видите, я добавил команды сборка и запуск. Также я добавил предварительную команду, которая будет запускаться перед каждым запуском выполнения start. Теперь мы можем запустить нашу программу, выполнив команду, и исходный код будет скомпилирован автоматически. Это возможно, потому что перед каждым запуском мы запускаем команду сборки, которая компилирует наши исходники через компилятор TypeScript.
Давайте немного изменим код нашей программы и перезапустим программу.
function main() {
console.log('Hello World! We will setup TypeScript debugging in WebStorm!');
for (let i = 0; i < 10; i++) {
console.log(`Debugging is fun! ${i}`);
}
}
main();
# run our program by following command
npm run start
Похоже, все работает. Хорошо, теперь давайте перейдем к настройке отладчика.
Отладка TypeScript в WebStorm
Во-первых, давайте добавим конфигурацию запуска в наши настройки WebStorm.
- Откройте всплывающее окно Редактировать конфигурации.
- Затем нажмите «+», чтобы добавить новый.
- В новом всплывающем окне выберите npm.
- После выберите команду start в меню скриптов.
В конце концов, мы закончили с настройками. Попробуем отладить. Ставьте точку останова где-нибудь, например, на втором вызове console.log. Для этого нажмите на номер строки слева.
Затем нажмите кнопку отладки вверху. Кроме того, не упустите одну важную вещь: сценарий start должен быть выбран так же, как текущая конфигурация запуска.
Красиво, но... Программа завершилась успешно, кроме того, с нашей точкой останова ничего не произошло.
Почему так случилось? Как я упоминал ранее, WebStorm не знает, где остановиться, потому что NodeJS выполняет скомпилированный код JavaScriopt.
Как это исправить? Нам нужно отредактировать файл tsconfig.json и установить для параметра sourceMap значение true. Это укажет компилятору TypeScript создатьсопоставление исходного кода между кодом TypeScript и JavaScript. Из-за этого WebStorm будет знать, где находится соответствующий код.
Попробуем еще раз отладить.
Наконец-то это работает! После этого вы можете использовать кнопку Возобновить программу и повторять каждый оператор цикла внутри кода. Потрясающе, не так ли?
В общем, настроить отладчик для TypeScript в WebStorm не так уж и сложно. Надеюсь, вы сможете использовать всю мощь отладчика WebStorm. Если у вас есть какие-либо вопросы, не стесняйтесь задавать их в разделе комментариев ниже.
Если вы хотите проверить исходные файлы, добро пожаловать на мой GitHub: https://github.com/Jakeroid/blog-article-typescript-debug-webstorm.
Первоначально опубликовано на https://jakeroid.com 18 февраля 2023 г.
