Отсебятина

Кросс-пост второго перевода, посвященного отладке карт на основе Google Maps API, из моего блога.

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

Скринкасты

Кликнуте по скриншоту, чтобы начать просмотр. Для просмотра необходим Adobe Flash Player. Используя полосу прокрутки, можно перемещаться по скринкасту.

Использование расширения Web Developer Toolbar. Подписи:

Это расширение для Firefox добавляет панель инструментов, содержащую все необходимые средства (порой, довольно-таки изящные) для web-разработки;
Этот скринкаст показывает лишь то, как некоторые из этих средств могут помочь при работе с Google Maps API. Но Вы должны попробовать использовать все из них, чтобы понять, какой же это мощный инструментарий, помогающий при разработке;
Работа с изображениями;
Этот инструмент очень полезен при определении позиционирования изображений, и их размеров. В случае же Google Maps этот инструмент показывает Вам, как API составляет карту из множества изображений;
Сейчас Вы можете увидеть карту, составленную из кусочков по 256*256 пикселей каждый;
Информация об изображениях;
Этот инструмент полезен при определении изображений, находящихся на странице, в их оригинальной форме. Это хороший способ увидеть, как web-дизайнер, используя CSS для управления свойствами изображений, создает сайт;
Заметьте, что в URL картинки содержаться координаты и уровень зуммирования (эти данные используются в функции getTileUrl);
Линейка;
В панель инструментов web-разработчика входит линейка, которая может использоваться для определения точных размеров какой-либо области. Это может пригодиться, например, при расположении элементов управления;
Тяните линейку к тому месту, где бы вы хотели увидеть элементы управления картой.

Использование консоли ошибок Firefox. Подписи:

Mozilla Firefox имеет встроенную консоль ошибок, которая отображает ошибки или предупреждения JavaScript, CSS или HTML, появляющиеся при обработки страницы;
Выполнение этого примера подразумевает отображение 3 маркеров на карте. Координаты расположения маркеров берутся из XML-файла. Ясно, что пример не заработает. Разобраться, в чем кроется проблема, нам поможет консоль ошибок, с помощью которой мы увидим ошибку JavaScript и перейдем к более сложным примерам;
Консоль ошибок есть в браузерах Firefox по умолчанию;
Консоль скажет нам, что мы имеем неопределенную переменную или функцию. Если кликнуть по этому сообщению, то откроется исходный код с указателем на ошибочную строку;
Теперь моя ошибка ясна: я использовала переменную point, хотя определила latlng.

Использование отладчика скриптов, встроенного в Internet Explorer. Подписи:

Internet Explorer может быть настроен для показа скриптовых ошибок и для последующего отображения проблемного JavaScript-файла в отладчике скриптов. Отладка скриптов средствами IE – процесс долгий. Поэтому рекомендуется заниматься отладкой с помощью консоли ошибок Firefox, а отладчик IE использовать для специфических случаев;
Для начала, нам необходимо включить отладку (по умолчанию — выключено);
Убираем флажки с обоих пунктов, отвечающих за выключение отладки;
IE остановит выполнение скрипта и выведет сообщение об ошибке, в котором будет указано название ошибки и номер ошибочной строки. Если Вы хотите посмотреть скрипт в отладчике, то нажмите кнопку 'Yes';
Стрелка указывает на строку с ошибочным кодом. Эта все та же ошибка – использование неопределенной переменной point вместо latlng;
Если Вы не выберите пункт меню “Stop Debugging”, то IE не даст вам продолжить работать.

Использование расширения Firebug для Firefox. Подписи:

Firebug – это расширение для Firefox, обладающее поистине мощными средствами web-разработки и отладки. Расширение помещает свою иконку в статусную строку браузера. Кликнув по иконке, Вы вызываете интерфейс с множеством вкладок. Некоторые из этих вкладок будут рассмотрены в данном скринкасте. Но будьте внимательны: установка данного расширения может замедлить работу браузера;
Вкладка Script;
Эта вкладка показывает Вам все включения JavaScript-кода на странице. Это очень полезно не только для проверки своего кода, но и, особенно, для изучения кода на других сайтах;
Кликните по иконке расширения;
Выберете крипт, загружающий Google Maps API;
Этот скрипт загружает API версии 2.93;
Внешний JavaScript-файл, добавленный загрузчиком API;
Код запутан, зато создает меньше нагрузки;
Вкладка Net;
Эта вкладка показывает Вам все запросы, проходящие через Сеть: запросы к JavaScript-файлам, изображениям, HTTP-запросы и т.д. Данная вкладка будет полезна при отладке работы различных классов Google Maps API, таких как: GClientGeocoder, GGeoXML и GDirections;
Это действие вызывает GClientGeocoder.getLatLng(), который возвращает лишь координаты точки;
Кликните по иконке расширения;
Запрос геокодера;
Щелкните по вкладочке Params, чтобы посмотреть информацию, находящуюся в запросе;
Щелкните по вкладочке Response, чтобы увидеть ответ с сервера;
Статус-код относится к классу GGeoStatusCode;
Вы можете видеть, что 200 означает успешный запрос;
Теперь давайте создадим запрос о несуществующем месте;
Новый запрос;
Новый статус код в ответе с сервера;
Сервер выдал нам ответ о несуществующем адресе;
Вкладка HTML;
Эта вкладка поможет Вам проверить DOM-элементы на странице, HTML- и CSS-код. Еще с ее помощью можно делать какие-либо маленькие изменения в коде;
Код элементов страницы, на которые наведен указатель мыши, подсвечиваются в редакторе;
Вы можете править HTML тут;
В этой части окна редактора Вы можете редактировать стили;
Вкладка Console;
Эта вкладка позволяет вам управлять JavaScript-кодом на текущей странице и просматривать сообщения отладчика. Это мощная альтернатива встроенной консоли ошибок Firefox;
Кликните по иконке расширения;
Консоль может показывать сообщения на подобии GLog.write;
Эти сообщения можно легко скопировать и вставить в другое место;
Консоль также может выводить более детализированную информацию о не только строковых переменных в Вашем коде, но и, например, об объектах какого-либо класса;
Клик по какому-либо элементу, выводимому в сообщении, приведет Вас к вкладке DOM, где этот объект подробно разобран: показано, в каких функциях он используется и его свойства;
Здесь Вы можете попробовать любую строчку JavaScript-кода;
Щелкните сюда, чтобы переключаться между различными стилями отображения кода;
Сообщения консоли показаны слева.

Использование GLog.write(). Подписи:

В Google Map API есть собственное средство отладки – Glog. Хотя оно и не такое функциональное, как Firebug, но работает в каждом браузере и является отличной альтернативой методу alert();
В этом примере данные о координатах маркера вновь берутся из подгружаемого XML-файла. Мы продемонстрируем отладку при помощи GLog и метода alert();
Сейчас мы добавим метод alert();
Запомните, что при этом дальнейшее выполнение скрипта прерывается до того момента, пока мы не нажмем кнопку Ok. Это не очень хорошо, так как может повлиять на функциональность вашей страницы;
Теперь добавим GLog.write();
Этот метод выводит все сообщения пошагово, с течением времени, и не прерывает выполнение скрипта.

ССЫЛКИ

Нижеприведенные ссылки могут быть полезными для Вас, если Вы последуете советам, данным в скринкастах:

Использование средств отладки