Как отлаживать производственное приложение Angular2/Typcript?

Question

Я приступаю к созданию нового приложения с использованием Angular2 и Typcript, никогда ранее не использовали ни одну из технологий вместе (но использовали их отдельно, поэтому у меня есть некоторый опыт).

Мой вопрос заключается в том, как отлаживать клиентский конец приложения, учитывая, что компилятор Виджета преобразует ваш код в JavaScript, и я получаю тонну сгенерированного компьютером кода (который порой выглядит, как сгенерированный машиной код).

Answer 1

Вы можете регистрировать сообщения и данные в консоли браузера, как обычно, и устанавливать контрольные точки в машинный javascript, используя инструменты разработчика вашего браузера. Сгенерированный код существенно не отличается от вашего кода машинописного текста - он отличается, но вы должны быть в состоянии определить, какую часть вашего кода вы ищете. Надеюсь, что это помогает

Answer 2

Typcript - транспилятор, который также может генерировать исходные карты для вас. Вывод на печать не слишком отличается от самого источника. Вы всегда можете просто отлаживать js-файлы.

Однако, если у вас был большой пакет js-файла и вы хотите отлаживать отдельные ts-файлы, вам нужно экспортировать исходные карты.

В машинописном машинописном тексте есть несколько флагов sourceMapping. См. https://www.typescriptlang.org/docs/handbook/compiler-options.html

Все текущие веб-браузеры могут загружать исходные карты и точки останова карты обратно в исходные файлы.

Вы можете связать исходную карту и источники как часть вашего .js-файла. (Примечание: Это позволит сделать JS-файлы намного больше)

tsc --sourceMap --inlineSources --inlineSourceMaps

В качестве альтернативы, если ваш веб-сервер может служить источником .ts файлы и .map файлы вы можете установить

tsc --sourceMap --sourceRoot <root of src>

второй вариант возвращает js-файлы с дополнительным комментарием sourceMappingUrl в конце, но devtools браузера должен искать файл .map и исходные файлы.