Blogasek by Piotrek Reinmar Koszuliński

Rys historyczny, można pomijać

Tak, wiem, że istnieje coś takiego jak debugger :). Nigdy się jednak z żadnego porządnie nie nauczyłem korzystać. Po trochu dlatego, że wymaga to zazwyczaj poświęcenia dodatkowego czasu na naukę nowego narzędzia, po trochu dlatego, że najwięcej kodu tworzę w PHP i JS w gVimie, który chyba nie posiada żadnego zintegrowanego narzędzia, ale głównie dlatego, że to często armata na komara. Niejednokrotnie wystarczy podejrzeć przecież zawartość jednej zmiennej aby rozwiązać problem. I tak prawdopodobnie każdy programista nauczył się "echowania" (kłania się zapewne PHP ;).

Problem pojawia się jednak kiedy zaczynamy tworzyć w Javascriptcie, który to nie posiada żadnego wyjścia, jakieś proste skrypciki. Pierwszym pomysłem jaki przychodzi do głowy jest wykorzystanie funkcji alert(). Często to dobre rozwiązanie, choć mało wygodne - wyskakujące okienko bywa naprawdę denerwujące. Szczególnie jak zaczyna pokazywać się coraz częściej i w większych ilościach. Dodatkowo, Firefox z którego korzystam, ma tę niezrozumiałą dla mnie własność, że kiedy wyskoczył jakiś alert nie dopuszcza mnie do okna przeglądarki. Co więcej - nie pozwala (a przynajmniej mi się nigdy nie udało) wyłączyć Javascriptu z poziomu tegoż okienka (co potrafi np. Opera). Kończy się więc to killem przeglądarki kiedy jakiś dowcipniś wrzuci alert("joke"); w niekończącą się pętle. A samemu podczas "echowania" też zdarzyło mi się zabić takim alertem, więc trzeba uważać :) (setInterval(), czy niefortunne powiązanie z jakimś zdarzeniem).

W związku z pytaniem, które ktoś rzucił dzisiaj na blipa zacząłem zastanawiać się czy nie ma lepszego rozwiązania. Pierwszy pomysł jaki mi przyszedł do głowy to napisanie prostej klasy Console, która będzie dodawała swoje okno na stronie i za pomocą jakiejś metody out(), push(), czy jakiejś pozwalała ładnie wypisywać zawartość danej zmiennej. Szybko jednak okazało się, że twórcy Firebuga wpadli na ten pomysł pierwsi :).

Konsola Firebuga, część właściwa wpisu

Konsola Firebuga udostępnia nam kilka ciekawych funkcjonalności. Pierwszą z nich jest console.log(), która pozwala formatować wyjście na kilka sposobów:

console.log("Ten kod powinien się wykonać");
 
var foo = "bar", x = 12.34, i = 122;
 
console.log("foo: %s, (int) i: %d, (float) x: %f", foo, i, x);
 
function Kopytko() {
	this.palec1 = 11.12;
	this.palec2 = "qń";
};
kopyto = new Kopytko();
console.log(kopyto);
console.log(kopyto.brak);

Jednak to nie wszystko. Możemy także pokolorować i nadać znaczenia naszej radosnej twórczości. I tak mamy dostępne metody console.debug(), console.info(), console.warn(), console.error().

Dodatkowo, przydatne (np. przy pracy z Ajaksem, czy manipulacjach w drzewie DOM) może się okazać również drukowanie HTMLa oraz XMLa. Służy do tego metoda console.dirxml(DOMElement). Wyświetla ona drzewo znane nam z zakładki "HTML" Firebuga.

To chyba na tyle o "echowaniu" na konsolę Firebuga. Więcej informacji możecie znaleźć w Console API oraz Rejestrowaniu Javascriptu (damn - nie mogę lepszego tłumaczenia znaleźć :). I tak z poziomu kodu można mierzyć czas wykonania bloku instrukcji console.time("name"); {..} console.timeEnd("name");, czy tworzyć asercje (a jak to się tłumaczy?).

Rys historyczny cz. 2, też można pominąć

Wpis ten napisałem głównie dla ludzi, którzy tak jak ja, jakimś cudem przeoczyli tę funkcjonalność Firebuga. Nie mylili się Zergu i mcv mówiąc, że o rzeczach oczywistych się nie pisze bo są... oczywiste. Jak jednak często się okazuje - nie dla każdego :). A właśnie taka demotywująca myśl spowodowała, że od tak dawna nic nie pisałem.

Wpis ten ukazał się w okrojonej (mniej osobistej) formie na moim blogu firmowym