Отсебятина
Кросс-пост второго перевода, посвященного отладке карт на основе 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();
- Этот метод выводит все сообщения пошагово, с течением времени, и не прерывает выполнение скрипта.
