Вернуться в библиотеку

Отладка JavaScript для новчиков

Автор: David Smith
Перевод: Плотников Денис
Источник: http://www.netmagazine.com/tutorials/javascript-debugging-beginners

Frontend разработчик Дэвид Смит описывает некоторые из ключевых особенностей современных средств разработки, которые могут помочь отладки JavaScript в вашем веб-сайте или приложении

За последние пять лет, во многом благодаря росту структур, таких как JQuery и Prototype, JavaScript стала популярной. Этот рост популярности и простоты использования, привел к созданию полноценных приложений, таких как Gmail, которые содержат тысячи строк кода JavaScript, которые требуют команды талантливых разработчиков для создания. В результате этого усложнения нужны мощные средства отладки для того, чтобы быстрее искоренить причину проблемы и устранить ее эффективно. В этом уроке автор описывает некоторые особенности современных средств разработки, которые можно использовать сегодня, чтобы помочь сделать отладки JavaScript менее болезненным. Мы ориентированы прежде всего на разработчиков Chrome инструменты и Firebug, но многие из этих функций доступны в другие инструменты, такие как Opera Dragonfly.

Консоль - обзор
Консоль это это друг разработчиков, используется для проверки DOM, отладки JavaScript и многое другое. В зависимости от вашего браузера, это просто запустить эту панель в любое время с помощью:Chrome и средства разработки Opera Dragonfly - Ctrl + Shift + IFirebug - F12 Чтобы помочь вам с отладкой скриптов, консоль панели автоматически отображает любые ошибки в коде, который произошли во время выполнения. Номер строки представлены рядом с ошибкой и нажав на сообщение перейдете к этой линии для встроенных отладки - удобно!

Запись данных на консоль
Консоль не только для пассивного отображения ошибок. Она также реагирует на команды API и API командной строки. Пожалуй, самый известный и самый полезный инструмент console.log () команда. При написании кода это полезно, чтобы иметь возможность напечатать значение переменной. В былые времена разработчики могли использовать Alert () диалог для визуального представления.

Легко видеть, как быстро она становится визуально полезной, если много переменных сбрасываются.Многие люди знают о стандартной функции журнала, но это также полезно знать, что есть и другие команды консоли API, которые позволяют различать различные типы данных, которые записываются в консоль. Пожалуй, наиболее полезные из них:console.info (): обеспечивает визуальное "инфо" и цветовое кодирование (синий) для обозначения "Info", журнала вызовов. Полезное для обозначения, когда что-то важное случиться

Группировка вызовов
Использование альтернативных регистрации вызовов обеспечивает смысловое и визуальное различие между информацией, печатается в консоли и может помочь читаемости. Мы могли бы все еще улучшить эту группировку дальше. Мы можем сделать это, используя console.group () . Остановить выполнение кода иногда нужно, когда выполняются определенные условия. Если в коде используется цикл, который запускается каждые 50 мс, например, вы, вероятно, не хотите, чтобы отладчик остановится на каждой итерации. Мы можем избежать этого, использованиеусловные точки останова.