Записи из этой темы
- Отладка web-приложения через браузер. Инструмент для отладки
- Отладка 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-е (сочетание клавиш + + ) во вкладке 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