Отладка — неизбежный и один из самых длительных этапов любого вида разработки. Клиентская веб-разработка в этом смысле не исключение. Более того, здесь этот вопрос стоит особенно остро, так что зачастую становится источником головной боли. Если при серверной отладке область действий программиста ограничена инструментом разработки, то на стороне клиента задачу отладки осложняют многочисленные внешние факторы — браузеры, с многообразием и различиями которых приходится считаться любому веб-разработчику.

Одной из основных проблем в данном случае является отсутствие единого интерфейса отладки. Во-первых, далеко не каждый браузер имеет встроенные инструменты отладки. Прежде всего это касается мобильных устройств. Во-вторых, в тех браузерах, где имеются инструменты отладки, интерфейс последних может значительно отличаться друг от друга.

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

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

JS LogFlush — комплексный инструмент для ведения JavaScript логов, включающий:

• кроссбраузерную замену console.log — на стороне клиента.
• систему хранения логов — на стороне сервера.

Ключевые возможности

• Кроссбраузерность — достигается за счет использования чистого JavaScript и отсутствия пользовательского интерфейса на стороне клиента.
• Подключение одной строкой. Нет необходимости создавать экземпляры специальных классов. Все что нужно, чтобы начать использовать JS LogFlush — это подключить к веб-странице его скрипт обработки как JavaScript. Нет необходимости использовать специальный синтаксис для вызова функции логгирования. Вместо этого вы можете использовать уже знакомый синтаксис console.log. Каждый вызов console.log будет автоматически заменен функциональностью JS LogFlush. Это означает, что вам не придется править уже написанный JavaScript код с вызовами console.log.
• Автоматизация и незаметность работы. Нет необходимости вставлять в веб-страницу кнопки/ссылки для скачивания подготовленных логов. Вместо того, чтобы выводить логи в консоль браузера, JS LogFlush сохраняет их на вашем сервере автоматически и незаметно для конечного пользователя. Тем не менее, необходимо помнить, что JS LogFlush предназначен только для целей отладки. Вы не должны использовать его на готовых (production) сайтах.
• Легкий и без зависимостей. Единственное требование, налагаемое JS LogFlush — стандартная PHP 5+ конфигурация на стороне сервера, а также поддержка JavaScript на стороне клиента.

Принцип работы

Как уже упоминалось выше, JS LogFlush состоит из двух частей: клиентской и серверной.
Клиентская часть (генерируемая серверной) встраивается в веб-страницу как JavaScript код. Этот код сохраняет весь вывод console.log в некотором буфере и сбрасывает/отправляет его содержимое к серверной части по мере заполнения буфера. Отправленные данные сохраняются в соответствующем файле на сервере.
Серверная часть — это PHP-скрипт, который обрабатывает запросы от клиентской части. Эти запросы делятся на 2 типа: запрос инициализации и запрос сброса данных.
Запрос инициализации посылается во время подключения скрипта обработки к веб-странице. Каждый запрос инициализации начинает новую лог-сессию с уникальным ID. В зависимости от этого ID генерируется JavaScript код клиентской части. Также ID лог-сессии посылается вместе с каждым запросом сброса данных для определения лог-сессии, к которой принадлежит этот запрос.

Пример использования

Серверный скрипт обработки (должен быть доступен онлайн):

// подключаем файл исходного кода класса JsLogFlush
require 'JsLogFlush.php';

// массив параметров конфигурации передаваемый в конструктор JsLogFlush
// См. список доступных параметров в phpDoc конструктора JsLogFlush
// Замечание: каждый параметр имеет значение по умолчанию.
// Так что вы можете опустить любой из параметров
// либо передать пустое значение вместо массива.
$cfg = array(
    'interval' => 1,
    'expire' => 0.5,
);

// создание экземпляра класса JsLogFlush
$obj = new JsLogFlush($cfg);

// вызов метода process() - точки входа класса JsLogFlush
$ret = $obj->process();

if ($ret) {
    // если результат не пустой, выводим его как JavaScript код
    header('Content-Type: text/javascript');
    echo $ret;
}

Веб-страница, которая может находиться где угодно (даже на другом домене):

<html>
    <head>
        <script type="text/javascript" src="//somedomain.com/path_to_your_processing_script.php?buffSize=1000&logTimeshifts=1"></script>
    </head>
    <body>
    ...
    <script type="text/javascript">
        ...
        console.log('текст/данные, которые нужно занести в лог');
        ...
    </script>
    </body>
<html>

Ссылки

Демо (логгер + менеджер) (данные для входа: demo/demo).
Исходники на Гитхабе.