Pull to refresh

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

Reading time 5 min
Views 935
Original author: Pamela Fox, Google Maps API Team

Отсебятина


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

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

Скринкасты


Кликнуте по скриншоту, чтобы начать просмотр. Для просмотра необходим Adobe Flash Player. Используя полосу прокрутки, можно перемещаться по скринкасту. picture
Использование расширения Web Developer Toolbar. Подписи:
  1. Это расширение для Firefox добавляет панель инструментов, содержащую все необходимые средства (порой, довольно-таки изящные) для web-разработки;
  2. Этот скринкаст показывает лишь то, как некоторые из этих средств могут помочь при работе с Google Maps API. Но Вы должны попробовать использовать все из них, чтобы понять, какой же это мощный инструментарий, помогающий при разработке;
  3. Работа с изображениями;
  4. Этот инструмент очень полезен при определении позиционирования изображений, и их размеров. В случае же Google Maps этот инструмент показывает Вам, как API составляет карту из множества изображений;
  5. Сейчас Вы можете увидеть карту, составленную из кусочков по 256*256 пикселей каждый;
  6. Информация об изображениях;
  7. Этот инструмент полезен при определении изображений, находящихся на странице, в их оригинальной форме. Это хороший способ увидеть, как web-дизайнер, используя CSS для управления свойствами изображений, создает сайт;
  8. Заметьте, что в URL картинки содержаться координаты и уровень зуммирования (эти данные используются в функции getTileUrl);
  9. Линейка;
  10. В панель инструментов web-разработчика входит линейка, которая может использоваться для определения точных размеров какой-либо области. Это может пригодиться, например, при расположении элементов управления;
  11. Тяните линейку к тому месту, где бы вы хотели увидеть элементы управления картой.
picture
Использование консоли ошибок Firefox. Подписи:
  1. Mozilla Firefox имеет встроенную консоль ошибок, которая отображает ошибки или предупреждения JavaScript, CSS или HTML, появляющиеся при обработки страницы;
  2. Выполнение этого примера подразумевает отображение 3 маркеров на карте. Координаты расположения маркеров берутся из XML-файла. Ясно, что пример не заработает. Разобраться, в чем кроется проблема, нам поможет консоль ошибок, с помощью которой мы увидим ошибку JavaScript и перейдем к более сложным примерам;
  3. Консоль ошибок есть в браузерах Firefox по умолчанию;
  4. Консоль скажет нам, что мы имеем неопределенную переменную или функцию. Если кликнуть по этому сообщению, то откроется исходный код с указателем на ошибочную строку;
  5. Теперь моя ошибка ясна: я использовала переменную point, хотя определила latlng.
picture
Использование отладчика скриптов, встроенного в Internet Explorer. Подписи:
  1. Internet Explorer может быть настроен для показа скриптовых ошибок и для последующего отображения проблемного JavaScript-файла в отладчике скриптов. Отладка скриптов средствами IE – процесс долгий. Поэтому рекомендуется заниматься отладкой с помощью консоли ошибок Firefox, а отладчик IE использовать для специфических случаев;
  2. Для начала, нам необходимо включить отладку (по умолчанию — выключено);
  3. Убираем флажки с обоих пунктов, отвечающих за выключение отладки;
  4. IE остановит выполнение скрипта и выведет сообщение об ошибке, в котором будет указано название ошибки и номер ошибочной строки. Если Вы хотите посмотреть скрипт в отладчике, то нажмите кнопку 'Yes';
  5. Стрелка указывает на строку с ошибочным кодом. Эта все та же ошибка – использование неопределенной переменной point вместо latlng;
  6. Если Вы не выберите пункт меню “Stop Debugging”, то IE не даст вам продолжить работать.
picture
Использование расширения Firebug для Firefox. Подписи:
  1. Firebug – это расширение для Firefox, обладающее поистине мощными средствами web-разработки и отладки. Расширение помещает свою иконку в статусную строку браузера. Кликнув по иконке, Вы вызываете интерфейс с множеством вкладок. Некоторые из этих вкладок будут рассмотрены в данном скринкасте. Но будьте внимательны: установка данного расширения может замедлить работу браузера;
  2. Вкладка Script;
  3. Эта вкладка показывает Вам все включения JavaScript-кода на странице. Это очень полезно не только для проверки своего кода, но и, особенно, для изучения кода на других сайтах;
  4. Кликните по иконке расширения;
  5. Выберете крипт, загружающий Google Maps API;
  6. Этот скрипт загружает API версии 2.93;
  7. Внешний JavaScript-файл, добавленный загрузчиком API;
  8. Код запутан, зато создает меньше нагрузки;
  9. Вкладка Net;
  10. Эта вкладка показывает Вам все запросы, проходящие через Сеть: запросы к JavaScript-файлам, изображениям, HTTP-запросы и т.д. Данная вкладка будет полезна при отладке работы различных классов Google Maps API, таких как: GClientGeocoder, GGeoXML и GDirections;
  11. Это действие вызывает GClientGeocoder.getLatLng(), который возвращает лишь координаты точки;
  12. Кликните по иконке расширения;
  13. Запрос геокодера;
  14. Щелкните по вкладочке Params, чтобы посмотреть информацию, находящуюся в запросе;
  15. Щелкните по вкладочке Response, чтобы увидеть ответ с сервера;
  16. Статус-код относится к классу GGeoStatusCode;
  17. Вы можете видеть, что 200 означает успешный запрос;
  18. Теперь давайте создадим запрос о несуществующем месте;
  19. Новый запрос;
  20. Новый статус код в ответе с сервера;
  21. Сервер выдал нам ответ о несуществующем адресе;
  22. Вкладка HTML;
  23. Эта вкладка поможет Вам проверить DOM-элементы на странице, HTML- и CSS-код. Еще с ее помощью можно делать какие-либо маленькие изменения в коде;
  24. Код элементов страницы, на которые наведен указатель мыши, подсвечиваются в редакторе;
  25. Вы можете править HTML тут;
  26. В этой части окна редактора Вы можете редактировать стили;
  27. Вкладка Console;
  28. Эта вкладка позволяет вам управлять JavaScript-кодом на текущей странице и просматривать сообщения отладчика. Это мощная альтернатива встроенной консоли ошибок Firefox;
  29. Кликните по иконке расширения;
  30. Консоль может показывать сообщения на подобии GLog.write;
  31. Эти сообщения можно легко скопировать и вставить в другое место;
  32. Консоль также может выводить более детализированную информацию о не только строковых переменных в Вашем коде, но и, например, об объектах какого-либо класса;
  33. Клик по какому-либо элементу, выводимому в сообщении, приведет Вас к вкладке DOM, где этот объект подробно разобран: показано, в каких функциях он используется и его свойства;
  34. Здесь Вы можете попробовать любую строчку JavaScript-кода;
  35. Щелкните сюда, чтобы переключаться между различными стилями отображения кода;
  36. Сообщения консоли показаны слева.
picture
Использование GLog.write(). Подписи:
  1. В Google Map API есть собственное средство отладки – Glog. Хотя оно и не такое функциональное, как Firebug, но работает в каждом браузере и является отличной альтернативой методу alert();
  2. В этом примере данные о координатах маркера вновь берутся из подгружаемого XML-файла. Мы продемонстрируем отладку при помощи GLog и метода alert();
  3. Сейчас мы добавим метод alert();
  4. Запомните, что при этом дальнейшее выполнение скрипта прерывается до того момента, пока мы не нажмем кнопку Ok. Это не очень хорошо, так как может повлиять на функциональность вашей страницы;
  5. Теперь добавим GLog.write();
  6. Этот метод выводит все сообщения пошагово, с течением времени, и не прерывает выполнение скрипта.

ССЫЛКИ

Нижеприведенные ссылки могут быть полезными для Вас, если Вы последуете советам, данным в скринкастах:
Tags:
Hubs:
+3
Comments 0
Comments Leave a comment

Articles