Клуб API Карт

Победа над ошибками ч.2

Пост в архиве.
dimik
23 мая 2012, 21:40
Победа над ошибками ч.2
Привет всем читателям блога и участникам клуба!

Сегодня мы продолжим свой рассказ о том, как эффективно искать ошибки в 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пасибо за внимание.