Angular 2 Ошибки и Typescript - как отлаживать?

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

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

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

Ответ 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"
}

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

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

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

Ответ 4

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

JetBrains некоторая документация по теме, которая может помочь.

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

Если вы просто ищете примеры того, как работает рабочий процесс, взгляните на этот проект Github, который показывает использование Webpack с Angular2.