NEXT 5/2008 - Wyłapać błędy na stronie

Napisanie poprawnej strony XHTML, zawierającej oprócz statycznej treści także mnóstwo kodu JavaScript wzbogacającego ją w dynamiczne elementy, nie jest prostą sprawą. O popełnienie błędów bardzo łatwo, stąd niezwykle przydatne są środowiska do debugowania kodu.

Strony WWW najlepiej sprawdzać, dysponując podglądem na żywo w przeglądarce internetowej. Tak też działa Firebug, który instaluje się jako dodatek do Firefoksa.

Narzędzie uruchamia się osobno dla poszczególnej zakładki prezentującej wybraną stronę. Cały jego interfejs mieści się na sporym panelu zadokowanym do lewej krawędzi okna, podzielonym na dwa obszary. Pierwszy przedstawia kilka zakładek prezentujących kolejno kod XHTML, CSS czy wszelki kod ujęty w znacznikach <script>. Jest to oczywiście nie tylko podgląd kodu, ale funkcjonalny edytor, przy czym tryb pracy przełącza się jednym przyciskiem. Można zatem zmodyfikować treść dowolnego znacznika, także jego atrybuty – id, class etc., a efekty zmian obserwować na bieżąco w przeglądarce. Użyteczną opcją jest automatyczne podświetlenie w edytorze kodu odpowiadającego elementowi wskazanemu myszą na podglądzie strony.

Treść prawego obszaru panelu Firebuga zależy od czynności podjętych w głównym obszarze. Wybranie tagu HTML powoduje wyświetlenie w nim trzech zakładek: Style, Layout i DOM. Pierwsza z nich prezentuje wszystkie reguły arkusza stylów dotyczące wybranego elementu, wskazuje też nazwę pliku i konkretną linię zawierającą prezentowany kod. Bardzo użyteczną funkcję dla webdesignerów oferuje druga opcja, wizualnie prezentująca w poglądowy sposób rozmiar danego elementu, wraz z wartościami marginesów wewnętrznych (padding), obramowania i marginesów zewnętrznych. Rzeczywiste obiekty na stronie są w tym trybie objęte miarką z podziałką pikselową, co dodatkowo ułatwia oszacowanie odległości między nimi.

Ostatnia opcja to interaktywna prezentacja drzewa DOM edytowanej witryny, co nietypowe, częściowo edytowalnego. Zmienić można choćby nazwę węzła, wartość (nodeValue) czy nawet listę jego dzieci (childNodes), oszukując tym samym przeglądarkę. Dostępne są także bardziej konwencjonalne metody – wybrany węzeł można po prostu usunąć, a efekty widoczne są na żywo, w oknie przeglądarki. Równie użyteczną opcją jest możliwość skopiowania do schowka wartości innerHTML elementu oraz jego adresu w notacji XPath.

Edytor CSS pozwala w locie zmodyfikować lub zablokować wybrane reguły oraz wstawić nowe, przy czym ma on pomoc kontekstową. Wszelkie zmiany są nanoszone na bieżąco, nie ma więc nawet konieczności odświeżenia widoku strony. Dołączony debuger JavaScriptu z warunkowymi punktami stopu (ang. Conditional Breakpoints) i podglądem wartości obserwowanych zmiennych pozwala w wygodny sposób tropić błędy w kodzie. Nieocenioną pomocą przy optymalizacji czasu ładowania strony jest zakładka Net prezentująca czas ładowania się elementów statycznych (np. obrazków) i wykonania poszczególnych plików z kodem.

Ocena:    (aby ocenić, musisz się zalogować w serwisie)

 del.icio.us |  Wykop mnie |  Digg this story |  dodajdo.com

• Lepszy JavaScript »
  zaawansowane techniki programowania w języku JavaScript
• Kup więcej za mniej »
  SKRZYDEŁKO.PL
• IDE dla każdego »
  NETBEANS 6.0
• Układanie kodu »
  tworzenie zoptymalizowanych programów
• Prawie jak Firefox 2.0 »
  NETSCAPE NAVIGATOR 9.0.1