Привет всем читателям блога и участникам клуба!

Сегодня мы продолжим свой рассказ о том, как эффективно искать ошибки в JavaScript-коде, используя «Инструменты разработчика» и API Яндекс.Карт. Для своих тестовых целей мы будем решать простую задачу. Допустим, мы хотим отметить центр карты меткой с соответствующей надписью.



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Поиск ошибок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0.8/?load=package.full&lang=ru-RU&mode=debug" type="text/javascript"></script>
<script type="text/javascript">
var map;
ymaps.ready(function () {
    map = new ymaps.Map('YMapsID', {
        center: [55.7, 37.5], zoom : 9
    });
});
function showMapCenter() {
    console.log('in showMapCenter');
    addPlacemarkOnMap(createCenterPlacemark());
    function createCenterPlacemark() {
        console.log('in createCenterPlacemark');
        return new ymaps.Placemark(map.getCenter(), { balloonContent : 'Центр карты' });
    }
   
    function addPlacemarkOnMap(placemark) {
        console.log('in addPlacemarkOnMap');
        map.geoObjects.add(placemark);
    }
}
showMapCenter();
</script>
</head>
<body>

</body>

</html>

Для отладки нашего функционала мы будем использовать «Инструменты разработчика», которые идут в комплекте с Google Chrome и Яндекс.Интернет.



«Инструменты разработчика» имеют несколько полезных вкладок.
Для задач отладки JavaScript-кода мы будем использовать вкладку «Script».



При выборе этой вкладки под ней в левом углу появляется выпадающий список JavaScript-ресурсов используемых на странице, включая тот JavaScript-код что написан на самой странице, и стрелочки «<» и «>» для их последовательного просмотра.

Например, на рисунке выбран файл combine.xml — сборка всех пакетов (package.full) API Яндекс.Карт.
И если указать магический параметр &mode=debug при подключении API Яндекс.Карт в тэге script, то весь код АПИ приходит к нам в непожатом виде, да еще и документированный JSDoc-ом и это очень здорово.
Щелкнув мышкой на номере нужной нам строчки кода, мы можем поставить точку- флаг (breakpoint) которая остановит выполнение скрипта в этой точке, и поможет оценить наличие и значения всех необходимых для выполнения функции параметров и их значений.



При установке breakpoint-ов справа открывается дополнительная панель:



1. Watch Expression — вы можете добавить на эту панель имя переменной или написать свое выражение JavaScript, которое будет выполнено при остановке.
2. Call Stack — последовательность вызовов функций, до позиции в которой произошла остановка скрипта.
3. Breakpoints — удобный менеджер точек останова, который позволяет включать или отключать некоторые из них, не удаляя их. А также подсвечивает точку в которой остановились.

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

Давайте рассмотрим функционал его кнопок, слева направо:



1. Кнопка «Pause script execution» (Остановить выполнения скрипта), позволяет продолжить или остановить его выполнение до следующей точки останова (если есть) или до его полного выполнения.
2. Кнопка «Step over next function call» (Перепрыгнуть к вызову следующей функции) — позволяет выполнить текущую функцию и остановить выполнение перед вызовом следующей функции.
3. «Step into next function call» — позволяет «проваливаться» в код функции, что полезно если именно в этой функции происходит ошибка. Можно пошагово перемещаться по выполняющимся в ней операциям, контролировать возвращаемые ими значения, включая объекты области видимости «Scope Variables» на вкладке справа.



4. «Step out of current function» — выйти из текущей функции. Десантирует вас в
scope внешней функции относительно той, в которую вы провалились.
5. «Deactivate all breakpoints» — отключить все точки. Отключить, но не стереть — просто их галочки uncheck-аются на левой панели «Breakpoints».

Итак, давайте откроем консоль и попробуем загрузить нашу тестовую страницу.

Мы получили ошибку в строке 25
TypeError: cannot call method 'getCenter' of undefined

... ну вот, опять 25! =(
Но не унываем и ставим breakpoint на строку «25».

Для этого щелкнем на номер 25 строки на которую ругается консоль, на номере должен появиться синий флажок:



Если у вас открыт редактор кода, то вместо установки breakpoint-а в браузере вы можете добавить в ваш код в нужной строчке «debugger;» и это отработает аналогично.

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



Однако сама карта не определена:



Чтобы выяснить причину, давайте поставим breakpoint на строку кода,
где у нас происходит инициализация карты (строка 13) и еще раз перезагрузим страницу:



Как стало видно инициализация карты не успевает произойти, так как функция, переданная в ymaps.ready, отработает после нашей showMapCenter.

Чтобы исправить ситуацию, перенесем вызов showMapCenter в этот обработчик:


ymaps.ready(function () {
map = new ymaps.Map('YMapsID', {
center: [55.7, 37.5], zoom : 9
});
showMapCenter();
});


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

Теперь мы знаем что «Инструменты разработчика» и API Яндекс.Карт помогают побеждать ошибки!

Cпасибо за внимание.

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

Чтобы поддержать тему праздника, давайте проведем свой парад самы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