Poznaj Google Maps API

Debugowanie skryptów dla początkujących

« powrót do listy kategorii

Pisząc aplikację, zawsze dążysz do tego, by działała poprawnie i bez błędów. Bardzo często w przypadku bardziej skomplikowanego kodu zdarzy się w kodzie błąd, który będzie powodował różnorakie nieprzewidziane efekty. W tej częsci kursu poznasz kilka podstawowych technik debugowania i częste źródła błędów w skryptach, opartych o Google Maps API.

Wybór narzędzi do debugowania jest czysto indywidualną sprawą, jeśli nie masz doświadczenia w tej kwestii to polecam używanie przeglądarki Firefox, która posiada wbudowaną konsolę błędów, a także wiele rozszerzeń, pomocnych przy debugowaniu. Jeśli korzystasz ze zwykłego Notatnika, to lepiej zmień go na inną aplikację, która oferuje minimum wyświetlanie numerów wierszy, kolorwanie składni i opcję skakania do konkretnego wiersza i konkretnej kolumny. Polecanym wyborem jest darmowy Notepad++.

Ten artykuł pokazuje, jak w prosty sposób wychwycić proste błędy w nieskomplikowanych aplikacjach. Jeśli jesteś doświadczonym programistą, zapewne będziesz chciał również skorzystać z bardziej zaawansowanych narzędzi, takich jak Firebug czy Webdeveloper Tools (oba dostępne jako rozszerzenia do Firefoksa). Jeśli jednak nie jesteś biegły w tej dziedzinie, poniższe wskazówki powinny Ci pomóc.

Konsola błędów JavaSript

Wbudowana w program Firefox konsola błędów jest podstawowym źródłem informacji o błędach, umożliwiającym ich precyzyjną lokalizację. Dzięki niej można wyłapać większość prostych błędów, takich jak literówki, niedomknięcia nawiasów, niedozwolone konstrukcje itp.

Niedomknięte nawiasy, literówki i inne mechaniczne błędy
Poniższa aplikacja jest błędna - nawias funkcji zewnętrznej nie został domknięty:

mapa.addControl(new GScaleControl();

przykład 1pokaż kod przykładu

Mapa się nie uruchomi, za to konsola błędów JavaScript (dostępna po wciśnięciu CTRL+SHIFT+J) wyświetli następujące komunikaty:

• Błąd: missing ) after argument list
  Plik źródłowy: http://gmapsapi.com/przyklady/048/01.html
  Wiersz: 52, Kolumna: 39
  Kod źródłowy:
  mapa.addControl(new GScaleControl();
• Błąd: mapaStart is not defined
  Plik źródłowy: http://gmapsapi.com/przyklady/048/01.html
  Wiersz: 1

Znając miejsce wystąpienia błędu (wiersz 52, kolumna 39) oraz jego ogólny opis (brakujący ")" po liście argumentów) można łatwo przeskoczyć do tego miejsca i poprawić błąd.

Inne błędy
Różne rodzaje błędów wymagają innych metod debugowania.przykład 2pokaż kod przykładu

Przykład 2 wydaje się na pierwszy rzut oka działać, lecz analiza kodu wskazuje, że w środku mapy powinien się wyświetlić marker. Tak się jednak nie dzieje. Konsola błędów daje następujący komunikat:

• Błąd: b is undefined
  Plik źródłowy: http://maps.google.com/intl/pl_ALL/mapfiles/122b/maps2.api/main.js
  Wiersz: 1012

Jeśli spotkasz błąd, w którym plikiem źródłowym jest plik API, a komunikatem błędu a is undefined, b is undefined itd. (API ma zaciemniony kod, większość argumentów funkcji ma krótkie, jednoliterowe nazwy) to na 99.9% błędny jest typ argumentu, przekazywanego do funkcji. Musisz dokładnie sprawdzić argumenty, jakie przekazujesz funkcjom i upewnić się, czy ich typy są zgodne z tymi, których funkcja wymaga. Dokładna analiza kodu przykładu pozwala stwierdzić, że przez przypadek jako ikonkę markera przekazano nie obiekt GIcon(), ale zwykły ciąg znaków:

var ikona = 'http://gmapsapi.com/ikony/polska.png';			
var ikonka = new GIcon();
ikonka.image = ikona;
ikonka.size = new GSize(30,23);
ikonka.shadowSize = new GSize(0,0);
ikonka.shadow = '';
ikonka.infoWindowAnchor = new GPoint(0,0);
ikonka.iconAnchor = new GPoint(0,0);
var marker = new GMarker(mapa.getCenter(),{icon: ikona});

GLog

API udostępnia bardzo pożyteczną przestrzeń nazw Glog, w której najbardziej przydatną funkcją jest funkcja write(). Używając tej funkcji można wywołać okienko, w którym będą logowane wybrane przez nas zdarzenia. Brzmi to dość dziwnie, ale wyjaśni się lepiej, jeśli zobaczysz jak w praktyce można zdebugować poniższą aplikację. Przykład 3 nie generuje żadnego błędu, który byłby widoczny w konsoli błędów: przykład 3pokaż kod przykładu

Jak jednak widać, markery z pliku XML się nie wyświetliły. Prześledzimy działanie aplikacji krok po kroku, dodając w newralgicznych punktach logowanie stanu aplikacji (np. GLog.write('Wczytywanie pliku') gdzie plik jest wczytywany). Łącznie wstawiłem do kodu kilkanaście razy funkcję GLog.write(), co możesz zaobserwować w przykładzie 4: przykład 4pokaż kod przykładu

Jej uruchomienie natychmiast pokazuje komunikaty, które pozwalają ustalić przyczynę błędu - w pliku XML nie znaleziono markerów, a dokładniej nie znaleziono żadnego tagu znacznik. Analiza pliku XML faktycznie pokazuje, że pomyliliśmy się w nazwie - tagi z danymi markera nazywają się marker, a nie znacznik. Poprawiona aplikacja 5 działa następująco: przykład 5pokaż kod przykładu

Teraz aplikacja działa poprawnie, można więc usunąć wszystkie wystąpienia funkcji GLog.write().

Inne porady dot. debugowania

• Zawsze staraj się najpierw sprawdzić, czy błąd leży po stronie klienta czy po stronie serwera. Przykładowo, aplikacja może nie odczytać danych z pliku XML, bo ten może być zwyczajnie źle wygenerowany.
• Twórz nowy kod małymi partiami, i po wprowadzeniu każdej sprawdzaj działanie aplikacji w przeglądarce. W ten sposób jeśli zauważysz błąd działania nie będziesz miał problemów z lokalizacją "wadliwego" kawałka.
• Oficjalna referencja klas może Ci pomóc w określeniu typów przekazywanych zmiennych.
• Używaj edytora oferującego podświetlanie składni - łatwiej będzie na bieżąco eliminować błędy składniowe.

To już ostatnia częśc kursu

• 1.Pierwsza mapa
• 2.Dodawanie znaczników na mapę
• 3.Zmiana domyślnej ikony znacznika
• 4.Popularne, darmowe ikony dla markerów
• 5.Wyświetlanie informacji na mapie
• 6.Wbudowane kontrolki i sterowanie
• 7.Zdarzenia
• 8.Polilinie
• 9.Obliczenia
• 10.Wczytywanie danych z pliku XML
• 11.Geokodowanie adresów
• 12.Optymalizacja wyświetlania dużej ilości znaczników
• jesteś tu!Debugowanie skryptów dla początkujących