Следим за каждым шагом программы
В прошлый раз мы разобрали, что такое логгеры и зачем они нужны. Вот короткая версия:
- Логгер — это часть программы, которая реагирует на нужные нам события и записывает их, как бы ведёт летопись работы программы.
- Эти записи называются логами. Они могут появляться в консоли, записываться в файл или отправлять в другую программу.
- Логи нужны, когда надо посмотреть, что в программе пошло не так, или если надо восстановить хронологию событий.
- Есть несколько уровней логирования: сообщения об ошибках, предупреждения, штатные срабатывания и разовые ситуации.
- Если проект сложный, лучше использовать готовый логгер, чем делать свой.
Сегодня мы попробуем логгер в деле — подключим его к цветному арканоиду на JavaScript и посмотрим, что будет в логах после игры.
js-Logger — простой логгер для браузеров
Если нам нужен простой логгер для консоли браузера с делением на уровни сообщений, то проще всего использовать js-Logger. Он подключается как обычный скрипт на HTML-странице:
<script src="https://github.com/jonnyreeves/js-logger/blob/master/src/logger.js"></script>
Сразу после этого его можно использовать для логирования разных сообщений:
Смотрим уровни логирования
В браузере Chrome можно настроить в консоли типы сообщений, которые мы хотим видеть. По умолчанию мы видим все события:
Если нам нужны только предупреждения и ошибки, то ставим галочку на Warnings (предупреждения) и Errors (ошибки). Браузер отфильтрует эти события и скроет всё остальное, но при этом сами логи никуда не исчезнут — мы просто перестанем их видеть. Это работает с любым логгером, который поддерживает разные уровни сообщений:
Добавляем логгер в проект
Теперь расставим сообщения логгера в разных местах в коде арканоида и посмотрим, что будет в консоли, если мы немного в неё поиграем. Мы не будем комментировать каждый шаг, а добавим вызов логгера в ключевых местах: при касании платформы, нажатии игроком на кнопки, потере или добавлении жизней и при вылете шарика за пределы поля. Чтобы было интереснее, сделаем события на разных уровнях. Единственное, чего у нас не будет, — сообщений об ошибках, потому что мы не обрабатывали их в исключениях.
Поначалу кажется, что всё нормально и с игрой всё в порядке: мы видим каждое нажатие клавиши и реакцию игры на все события:
Но как только мы потратим последнюю жизнь, то увидим странное: начнётся бесконечный повтор событий «Шарик улетел за границы поля» → «Потеряли жизнь». При этом внешне игра остановится штатно: появится чёрный экран с надписью «Game over»:
Оказывается, программа вошла в бесконечный цикл: ей кажется, что шарик всё время улетает за границы поля и это нужно обработать. Без логгера мы этого бы не заметили: кажется, что игра просто остановилась, но внутри продолжает кипеть работа. Эту ошибку легко поправить: перед завершением игры нужно виртуально вернуть шарик на поле. Попробуйте сделать это самостоятельно и проверьте себя, заглянув в консоль.
log4javascript — продвинутый логгер для сложных задач
Если понадобится логгер посложнее, можно посмотреть на log4javascript — он также подключается как внешний скрипт и не требует установленной платформы Node.js (как это делают многие логгеры).
Особенность этого логгера в том, что он может не просто выводить сообщения в консоль, но и создать отдельное окно для логов:
Чтобы подключить логгер, его нужно скачать себе на компьютер, а потом указать полный путь к файлу, например так:
<script type="text/javascript" src="/Users/mike/Downloads/log4javascript-1.4.13/log4javascript.js"></script>
Добавим логгер в проект — для этого скопируем из руководства пример подключения логгера с выводом во внешнее окно:
Теперь мы можем делать то же самое, что и с предыдущим логгером: отслеживать все события, смотреть логи и делать выводы о том, как работает игра. Если нужно сохранить лог в отдельный файл, можно добавить специальный модуль — он сохранит весь вывод с момента запуска.
Что дальше
В следующий раз добавим логгер в проект на Python — там больше возможностей для отладки и настройки таких сообщений.