Log4javascript: продвинутые логи в JavaScript

С развитием веб-технологий появляется все большее количество сайтов с богатой клиентской частью. Как следствие, разработчикам все чаще приходится сталкиваться с отладкой JavaScript-кода, часто с учетом специфики того или иного браузера. На Хабре уже был пост, посвященный способам отладки JavaScript, однако описанные в нем средства и приемы не всегда применимы. Не для всех браузеров есть возможность установить Firebug, а встроенные средства отладки (если они есть) часто неудобны и обладают скудными возможностями.
Решением данной проблемы может стать ведение логов. И пусть с полноценным дебаггером логи по своим возможностям не сравнятся, тем не менее они могут здорово помочь в поисках ошибки. Я хочу рассказать вам об удобном и очень мощным средстве для логирования JavaScript приложений — фреймворке log4javascript.

Что это за зверь?

Log4javascript — это довольно простой в использовании, но в то же время достаточно мощный инструмент, основанный на Log4j — средстве, знакомом многим Java-разработчикам.

Одно из основных достоинств log4javascript — кроссбраузерность. Как утверждают разработчики, поддерживаются следующие браузеры:

• Internet Explorer 5+
• Firefox 1.0+
• Safari 1.2+
• Chrome — все версии
• Opera 8.1+

Другое достоинство — очень богатые возможности ведения логов. Лог может выводиться в отдельном окне браузера, а может отправляться на web-сервер посредством Ajax или HTTP POST запросов. Существует возможность одновременного создания нескольких логгеров, настройки уровней важности сообщений (info, debug, error и другие), и настройки формата сообщений. Но обо всем по порядку.

Быстрый старт

Существует 3 варианта фреймворка:

• Standart (126Кб) — полная версия, содержащая в себе все возможности log4javascript
• Production (47Кб) — версия, заточенная на отправке логов на сервер
• Lite (12Кб) — легкая версия, для отладки простых скриптов (можно создать только один логгер, и выводить сообщения только в отдельном окне браузера)

Все версии фреймворка доступны для загрузки на этой странице.

Для начала работы достаточно подключить js-файл с подходящей вам версией фреймворка и создать объект-логгер:

var log = log4javascript.getDefaultLogger();

Теперь для добавления сообщения в лог можно воспользоваться одним из методов созданного объекта, (перечисление в порядке возрастания уровня сообщения):

 log.trace()
 log.debug()
 log.info()
 log.warn()
 log.error()
 log.fatal()

Так, например, результатом вызова log.info(«Hello, world!») будет следующее сообщение:

22:49:17 INFO - Hello, world!

Каждому методу можно передать несколько параметров:

var a="Error";
var b="has";
var c="occured";
log.error(a, b, c);

Получим следующее:

22:53:04 ERROR - Error has occured

В качестве параметра можно передать не только строку, но и объект:

var obj=new Object();
obj.name="Scott";
obj.position="web developer";
log.debug(obj);

Результ:

22:53:04 DEBUG - {
  name: Scott,
  position: web developer
}

Удобно, не правда ли? Как я уже сказал, по умолчанию сообщения выводятся в отдельном окне браузера, которое выглядит так:


На скриншоте видно, что сообщения разных уровней важности отображаются разными цветами. Также в этом окне можно легко включать только сообщения нужного вам уровня, либо выполнить фильтрацию (в том числе с использованием регулярного выражения).

Пожалуй, даже только уже описанных средств с головой хватит для отладки большинства скриптов. Тем не менее, возможности log4javascript намного богаче.

Продвинутое логирование

Приводить здесь полное описание фреймворка считаю неуместным — для этого существует документация. Я же ограничусь более общим описанием.

Итак, основными компонентами log4javascript являются объекты 3 классов: logger, appender, layout.
Logger — это класс, предоставляющий методы вывода сообщений:

info(), warn(), error()

и другие (работа с ними была описана в предыдущем разделе).
Создание логгеров выполняется вызовом метода

log4javascript.getLogger("name")

, аналогично можно получить ссылку на уже существующий логгер, зная его имя.
С помощью метода

logger.setLevel()

каждому логгеру можно задать уровень сообщений, которые ему следует «пропускать» (сообщения с уровнем ниже установленного будут игнорироваться). Вот список возможных уровней (по возрастанию):

ALL, TRACE, DEBUG, INFO, WARN, ERROR, FATAL, OFF

.

Важно отметить, что сами логгеры выводом сообщений не занимаются. Для этой цели предназначены appender-ы. Appender — это объект, который принимает сообщения от логгера, и, если их уровень выше заданного, обрабатывает их — выводит на экран, отправляет на сервер, и т.д. Один логгер может иметь несколько appender-ов. Добавление и удаление appender-ов выполняется с помощью методов:

logger.setAppender(), logger.removeAppender(), logger.removeAllAppenders()

Для каждого appender-а можно установить собственный уровень, в дополнение к уровню логгера.
В log4javascript есть следующие типы appender-ов:

• AlertAppender — выводит сообщения с помощью стандартных alert-сообщений JavaScript
• AjaxAppender — отправляет сообщения на сервер посредством Ajax или Http запросов
• PopUpAppender — выводит сообщения в отдельном окне браузера
• InPageAppender — практически идентичен предыдущему, с той лишь разницей, что выводит сообщения не в отдельном окне, а в iframe
• BrowserConsoleAppender — показывает сообщения в консоли браузера (и в консоли Firebug)

Для настройки формата сообщений предназначены объекты класса layout. Вполне логично, что каждый appender может иметь лишь один layout. Установка layout-а выполняется с помощью метода

appender.setLayout()

Log4javascript предоставляет в наше распоряжение следующие layout-ы:

• NullLayout — не показывает ничего, кроме текста сообщения
• SimpleLayout — показывает уровень сообщения и его текст, разделяя их дефисом
• PatternLayout — позволяет задать шаблон выводимых сообщений
• XmlLayout — выводит сообщения в формате Xml
• JsonLayout — выводит сообщения в формате Json
• HttpPostDataLayout — формирует сообщения в виде Url-закодированной строки

На мой взгляд, возможностей данного фреймворка с лихвой хватит, чтобы реализовать полноценное ведение логов даже в самом сложном JavaScript-приложении, значительно облегчив жизнь разработчику.

Заключение

Надеюсь, данная заметка обратит внимание уважаемого хабрасообщества на данный замечательный, но незаслуженно остающийся в тени, фреймворк, и что log4javascript поможет кому-то сократить время и усилия, затрачиваемые на отладку JavaScript.