Блог API Яндекс.Карт

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

22 мая 2012, 18:05
Привет всем читателям блога и участникам клуба!

Сегодня мы продолжим свой рассказ о том, как эффективно искать ошибки в 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пасибо за внимание.
10 комментариев
Подписаться на комментарии к посту
Удалённый пользователь
23 мая 2012, 13:47
но это же ясно должно быть каждому прогеру работающему с DOM  - что запускать сторонний контент без готовности контента бессмыслена
Если Вы этого не знаете - то извините.. )))

Готовность DOM тут не играет роли, т.к. АПИ загрузится уже после готовности DOM. Поэтому с ней начинают после того как выполнится обработчик ymaps.ready, а не как в первой версии после document.ready.

К тому же это просто пример, как найти ошибку в синтаксически правильном коде. И если вы почитаете клуб то поймете что там половина пользователей alert-ами отлаживаются.

Удалённый пользователь
23 мая 2012, 22:16
но я не в курсе вашей конструкции использования термина ready, но по традиции обычно оно и принадлежит как раз к этому событию. Странно вообще как это использовать функции до загрузки DOM  - не классично
------------
так теперь по поводу отладки
как я понимаю Вы используете Хром, я же предпочитаю использовать Мозиллу - и у меня боле широкий ассортимент в отладычных средствах, так что алерты - хорошо , но и другие механизмы есть - почему же ваш это последняя инстанция? а как же знаменитый Vekman FireBug и MDMVM!!!
-- их чего уже не существует?  или все же вы считаете что кроме Хрома браузеров в природе не имеет право существовать в природе
-- кстати ваш способ отладки тоже не совсем простой - я бы отлаживал проще ...
-- так что вариантов достаточно   , но как пример  все возможно.

Никто и не говорит что последняя инстанция и только Хром.

В первой части я рассказывал про firebug и про dragonfly, Хром выбран потому что он быстрее чем Firefox и Developer Tools с ним идут по-умолчанию, а не ввиде аддона.

 

Использовать функции не работающие с DOM вполне нормально и до загрузки DOM 

Удалённый пользователь
23 мая 2012, 22:31
ну не читал я первую часть - извини меня!!
-- претензии снимаются здесь
и про фунции с DOM  тоже согласен, но желательно чтобы юзеры понимали, что все же лучше подождать ее загрузки и потом выполняли действия - ибо тут такая тонкая грань, что за частую при неодновременной загрузки контента часто вылетают ошибки которые и приводят к не пониманию исполнения кода...
-- во всяком случае я предпочитаю потерять время на загрузке контента , чем потом ловить крохи неоднозначности.
Удалённый пользователь
23 мая 2012, 22:34
на счет быстродействия хрома я не согласен))
-- у меня мозилла летает быстрее хрома.. и я вообще стронник Gecko,

боюсь ты один такой.

Сам отлаживаюсь в ФФ и вообще больше люблю ФФ.

Но как же он тупит....

Удалённый пользователь
25 мая 2012, 02:54
ты не прав
-- точная настройка ФФ дает очень не плохие результаты
не надо перегружать расширениями - отладочный вариант
еще если ты хочешь чтобы быстрее в отладке работало
-- можно все расширения распаковать в дирекции
-- тогдв  загрузка и исполнение не будет жрать рессурсы на распаковку при использовании расширения
-- кстати то что местный бар не распакован - это плохо - лучше его запаковать новым вариантом, а при установке распаковывать полностью,
используя ключик
unpack
тогда он работать будет быстрее.
-- это проверено - на файербаге мной неоднократно
-- есть еще варианты оптимизации но это уже пошли часности
-- я к примеру использую тандем SeaMonkey+ Vekman  последний кроме всего прочего видит внутренний код браузера, так что в качестве отладчика вообще великолепный инструмент.
Удалённый пользователь
25 мая 2012, 02:56
меня вообще сейчас заинтересовали ваши карты, так что ждите скоро присоединюсь  к вашей команде, пока не "сломаю" полность. ярушку и не вгоню ее внутрь браузера
Удалённый пользователь
23 мая 2012, 22:23
я приглашаю Вас в свой клуб который занимается чистым API в инете
http://clubs.ya.ru/4611686018427455323/
-- в котором я собираюсь в ближайшее время выложить свои разработки по использовании API Фотки - для синтеза некоторых внешних альбомовов к примеру вот такого