Отладка web-приложения через браузер. Отладка JavaScript через console.log()

Записи из этой темы
  1. Отладка web-приложения через браузер. Инструмент для отладки
  2. Отладка web-приложения через браузер. Отладка JavaScript через console.log()

При отладке JavaScript/jQuery кода веб-приложения часто требуется узнать:

  • значение переменной в определенном месте кода
  • значения переменной до выполнения какого-то кода и после его
  • вызвалась ли функция вообще.

Для новичков отладка JavaScript (JS) проводится самым очевидным способом через alert-дебаг. То есть в коде пишется что-то подобное:

var a = "Hello";
alert( a );

И в итоге получали следующее:

Alert Debug

Такой способ достаточно прост в использовании и был бы идеальным, если присутствовали следующие недостатки:

  • если при выкате веб-приложения в производство (production) разработчик забыл убрать команды для отладки, то сообщения дебага будут видны конечному пользователю. А это дополнительное неудобство для пользователя и формирование мнения о «сырости» приложения.
  • переменная обязательно должна быть строкой, числом или массивом. В случае же с объектами будет следующая ситуация:
var a = {
    "hello": "world"
};
alert( a );

alert-debug2

Как видно, результат не очень информативный. На самом деле, средство для отладки JS уже «зашито» в браузеры по-умолчанию чуть ли не с самого их появления: использование команды console.log( a );. Результат будет записан в консоль браузера, которую можно открыть в WebInspector-е (сочетание клавиш + + ) во вкладке Console:

Console Debug

Кроме console.log() браузерами поддерживаются другие методы вывода отладочных сообщений в консоль для выделения функционального смысла отладочных сообщений:

var someVariable = "Value of someVariable";
console.log( someVariable );
console.info( someVariable );  // информационное сообщение
console.warn( "It's not a critical bug" );   // сообщение о не критических ошибках.
console.error( "It's a critical bug" ); // сообщение о критических ошибках с возможность просмотреть track error

Different messages in console

P.S.: Стыдно признаться, но я пользовался  alert-дебагом целых 2 года своей карьеры web-программиста. Не повторяйте моих ошибок.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *