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 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?).
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
Asercji się raczej nie tłumaczy, rejestracja → logowanie raczej. Poza tym mua nie rozumie taga „output”, za to wydaje mnie się, że przydał by się „debugowanie”, bo to do tego się przydaje. Aha: +10 za tytuł bloga :-)
No nie;P do tagów się przyczepił;)
Ciekawe czy ten gościu z Blipa dostał powiadomienie, że go tu cytujesz…
Słóży => Służy
http://mochikit.com/doc/html/MochiKit/Logging.html
Tak, dołączanie kodu całej biblioteki dla takiej pierdółki też może być wyciąganiem armaty na komara. Jednak na czas tworzenia skryptów lub jeżeli są one na tyle skomplikowane, by i tak musieć z którejś z bibliotek skorzystać, można o niej pomyśleć.
ciekawy wpis :) kiedyś o omijaniu alert pisał Riddle - http://perfectionorvanity.com/2006/12/09/mniej-ssace-window-alert/ - przy testowaniu skryptów też bardzo przydatne :) brak tego błędu w FF, i można się dostać do reszty okienek ;)
@Minio: Dzięki za linka. Jakbym miał kiedyś jakieś problemy z różną implementacją JS w przeglądarkach, to będzie czego użyć awaryjnie. Ale tak na co dzień, to wolę jednak Firebuga :)
@stan: A dziękuję :) A ja po lekturze wpisu Riddla stwierdzam że jeszcze nie jestem dostatecznie geekowaty, bo mi nawet nie przyszło do głowy nadpisywanie metody alert() przy pomocy greasemonkey ;D