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

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

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

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

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

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

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

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

var a = {
    "hello": "world"
};
alert( a );

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

Кроме 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