www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Debugowanie skryptów dla początkujących

Ten artykuł dotyczy API w wersji 2

« 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

Tytuł następnej części kursu to Pierwsza mapa

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Pierwsza mapa

API v2

Kurs podstaw cz. I: Witaj świecie, czyli jak wstawić mapę na stronę i zacząć programować


Dodawanie znaczników na mapę

API v2

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Popularne, darmowe ikony dla markerów

API v2

Kurs podstaw cz. IV: Lista darmowych ikon do wykorzystania w Twojej aplikacji mapowej


Geokodowanie adresów

API v2

Kurs podstaw cz. XI: Proste i szybkie geokodowanie adresów (zamiana adresu na współrzędne)