День победы над ошибками

Поздравляем всех участников клуба с прошедшим днем победы!

Чтобы поддержать тему праздника, давайте проведем свой парад самыx современных вооружений веб-разработчика: тех, что делают поиск ошибок в JavaScript коде не чем-то магическим, а вполне предсказуемым и контролируемым процессом.

Тем, кто не представляет своей работы без методов класса Console, и тем, кто всё еще сражается с ошибками с кремниевым топором alert()-ов, хотим представить краткий обзор полезного инструмента, который де-факто является стандартом, описан в CommonJS и уже реализован во всех современных браузерах в виде Firefox Firebug, Opera Dragonfly или Chrome Developer Tools.

Сейчас это особенно актуально, ведь в API Яндекс.Карт 2.0 появилась возможность работать с API в режиме debug (при подключении API нужно указать в урле параметр mode=debug).
 
Для веб-разработчиков, использующих API Яндекс.Карт, это важно прежде всего потому, что теперь при отладке кода можно понять, что и где сделано не так.


В качестве примера мы рассмотрим Chrome Developer Tools, или в переводе «Инструменты разработчика».



Именно это расширение стоит использовать по ряду причин: во-первых, оно интегрировано в браузер, а не является аддоном как Firebug, а, во-вторых, оно, как и сам Chrome, работает быстрее, чем Firefox+Firebug, и потребляет меньше памяти.

Возможности, которые предоставляет этот инструмент

Для начала давайте рассмотрим в нем сам объект «console».



Вывод сообщений в консоль:
console.log(Object [, Object ...]
Принимает объект или строку с паттернами (%s — строка, %i (%d) — число, %f — число с плавающей точкой (форматирование не поддерживается), %o —- ссылка на объект)
Если вы передаете строку для подстановки и больше аргументов, то лишние аргументы будут склеены в строку через пробел.
Дополнительные методы (полностью аналогичны log) лишь для разделения уровней логирования:
console.info(Object [, Object ...]
console.warn(Object [, Object ...]
console.error(Object [, Object ...]



Также у Chrome Developer Tools есть поддержка Firebug Command Line API.

Селекторы:
$('id'), не путать с jQuery-селектором — этот метод возвращает элементы только по id.
$$('selector') — позволяет искать элементы в DOM. формат selector соответствует формату querySelectorAll.
$x('xpath', context) — позволяет искать элементы в DOM по xpath выражению (по сути — обертка над document.evaluate).

Печать объектов (в этих методах идентификатор id передается не как строка, а как ссылка на объект):
inspect(id) — очень полезный хэлпер — открывает панель «Elements» и отображает в ней найденный по селектору элемент, в правой панельке показывает его стили.
dir(id) — делает дамп элемента в виде JavaScript-объекта с полями.
dirxml(id) — делает дамп элемента ввиде HTML-дерева.



keys(object) — возращает массив имен полей объекта.values(object) — возвращает массив значений полей объекта.

События
monitorEvents(object, [type]) — подписывает консоль на все или определенные события объекта. В параметре type можно передать массив событий, на которые необходимо подписаться.

Также поддерживаются группы событий
mouse: mousedown, mouseup, click, dblclick, mouse move, mouseover, mouseout, mousewheel.
key: keydown, keyup, keypress, textInput
touch: touchstart, touchmove, touchend, touchcancel
control: resize, scroll, zoom, focus, blur, select, change, submit, reset
Если type не указан, консоль подписывается на все типы событий объекта.
Пример: monitorEvents(window, ['mouse', 'key']

unmonitorEvents(object, [type]) — отписывает консоль от событий.

Группировка сообщений:
console.group('Имя группы сообщений');
console.groupEnd(



Профилирование:
console.time('title') — хелпер для определения времени выполнения.
console.timeEnd()
console.profile('title') — профайлер кода (показывает в отчете, что и сколько раз выполнялось, сколько времени потребовало).
console.profileEnd()

Отладка:
console.trace() — при вызове внутри функции печатает в консоль всю последовательность вызовов.
debugger; - очень полезный хэлпер, останавливает выполнение скрипта в текущем scope (аналог установки breakpoint-а).

Прочее:
clear() — очищает консоль

Панели:



На основной панели Chrome Developer Tools есть очень полезные вкладки:
Elements — отображает DOM-структуру документа.
Resources — ресурсы, используемые документом (cookies, LocalStorage и т.п.).
Network — назаменима для отладки AJAX вызовов и вообще полезная штука — отображает заголовки запросов и ответов, скорость загрузки файлов и т.п.
Script — позволяет просматривать все JavaScript-файлы, используемые на странице, ставить у них точки останова (BreakPoints) и производить навигацию по стеку вызовов.

Желаем вам удачи в ваших сражениях с ошибками. С таким оружием, победа будет за вами!

В следующей статье, посвященной работе над ошибками, мы подробно расскажем об использовании вкладки Script для отладки и поиска ошибок в JavaScript-коде.

Список литературы:
http://habrahabr.ru/post/50445/
http://www.ieinspector.com/dominspector/manual/index.html?consoleapi.htm
http://www.opera.com/dragonfly/
http://getfirebug.com/wiki/index.php/Command_Line_API