Угловые ошибки 2 и машинописный текст - как отлаживать?

Question

Я только что начал проект по изучению Angular2 и Typcript + Javascript. Я исхожу из фона Java, и мой подход к отладке проектов обычно представляет собой комбинацию трассировок стека, ошибок компиляции и - на больших проектах - множество тестовых примеров. Тем не менее, большая часть этого, похоже, напрямую не переводится в мир web-dev; особенно отлаживая мой код, взаимодействующий с библиотеками Angular2.

Может ли кто-нибудь предложить какие-либо подходы, которые я могу предпринять для отладки кода, работающего с Angular2? В частности, как я могу увидеть, какие части моего HTML/TS вызывают проблемы? Я проверил консоль, из которой я вижу, что я сломал Angular2, но из этого не кажется более информативным.

Просто уточнить; Мне не нужна помощь для этого конкретного экземпляра. Я хотел бы узнать, как диагностировать + исправить эти проблемы самостоятельно.

Answer 1

Предполагая, что вы используете Chrome, вы можете установить точки останова на вкладке «Источники» в консоли. Эти контрольные точки могут быть установлены в файлах ts. Если вам нужна информация из js-файла, вы можете отключить исходные коды Javascript в настройках консоли: это позволит вам установить точки останова в js-файлах.

В точке останова вы можете делать обычные (часы, шпионы, трассировка стека и т. Д.). Вы также можете написать JS в консоли с доступом к локальным переменным непосредственно, например:

function b(){ 
    var c = 1; 
    // if you put a breakpoint here and type c in the console, it will write "1" 
} 

В частности, в угловом 2, вы можете добавить точки останова в «броске е» линии в их библиотеке, вы получите больше подробные следы стека. Если вы нажмете на «...» в своих трассировках стека, вы получите доступ к вашему файлу, который вызвал ошибку.

Это для реальных ошибок. Теперь, для повышения производительности, на вкладке «Timeline» вы можете нажать кнопку «Запись» в левом верхнем углу. Как только вы закончите запись (нажмите «закончить»), вы увидите использование ЦП. Вы можете увеличить события на временной шкале, чтобы увидеть, какая часть кода использует слишком много ресурсов.

Вы также можете отслеживать память, установив флажок «Память».

Если вам нужно отлаживать iframe, в консоли есть поле выбора, в котором указано «верхний кадр», который вы можете установить в зависимости от того, какой вы хотите.

Если я забыл что-то важное, просто спросите :).

Answer 2

Я думаю, что это не просто для Angular2, но если вы пришли из фона Java, я предполагаю, что это больше похоже на «как я могу успешно отлаживать веб-приложения JavaScript» в целом.

В связи с этим я настоятельно рекомендую вам взглянуть на Chrome Devtools page (учитывая, что вы используете Chrome с очень аккуратным встроенным devtools).
На этой странице есть много полезных уроков. В частности, в вашем случае, вероятно, статья на Debugging JavaScript, который имеет некоторые интересные Tipps как условная отладка, разбивая на модификации DOM, даже разорвать на пойманные/неперехваченные исключения и т.д.

Я также часто предлагаю человек делать свободный Code School course on Discover Devtools, которая хороша, как Что ж.

В случае с TypeScript также убедитесь, что вы включите исходные коды. Как вы, вероятно, знаете, что TypeScript напрямую не выполняется браузером, а скорее «компилируется» (или, как его называют «transpiled») в JavaScript. Тем не менее, вы, вероятно, не хотите отлаживать переданный JS, а скорее код TypeScript, который вы написали.Чтобы включить sourcemaps, установите соответствующий флаг в вашем tsconfig.json:

{ 
    "version": "1.6.2", 
    "compilerOptions": { 
    ... 
    "sourceMap": true 
    }, 
    "exclude": [ 
    ... 
    ] 
} 

Answer 3

Если вы едете из мира Java, есть хороший шанс, что вы уже используете IntelliJ IDEA от JetBrains. Если это так, то можно отлаживать приложения JavaScript (и TypeScript) непосредственно в среде IDE, используя тот же интерфейс, который вы используете для приложений Java.

JetBrains имеет some documentation по вопросу, который может помочь.

Как было сказано в других ответах, вы также можете использовать отладчик Chrome Inspector. Лично я предпочитаю использовать IntelliJ для этого.

Если вы просто ищете примеры того, как работает рабочий процесс, взгляните на это Github project that shows the use of Webpack with Angular2.

Answer 4

Откройте консоль веб-разработчиков, перейдите в раздел «Источники». Нажмите «cntrl + p». Откроется окно поиска, где будет напечатано «.ts», и найдите файл или найдите его в файле «myfile.ts». Откройте его, и вы можете установить точки останова непосредственно в коде, так же, как мы поставили точки останова в файле js и Voila, вы можете отлаживать TypScript.