Jakiś czas temu yarpo napisał artykuł o stworzeniu odpowiednika funkcji print_r() w JavaScript. Sprawił mi tym podwójną radość - po pierwsze - to bardzo przydatna funkcja. A po drugie - wiem, co zrobić, żeby stała się jeszcze lepsza. W sumie jest jeszcze jeden powód do radości, ale o tym za chwilę.

Print_r() autorstwa yarpo elegancko przygotowuje nam napis pokazujący obiekt podzielony na poszczególne pola i ich wartości (i śmiga również z zagnieżdżonymi obiektami, tablicami). Problem pojawia się, gdy chcemy to gdzieś wyświetlić. Yarpo wyrzucił ten napis do okienka alert. Zalety tego okienka to to, że łatwo je wywołać i trudno przeoczyć. Niestety, działa blokująco - wstrzymuje dalsze wykonywanie skryptów na stronie. A nie zawsze tego chcemy. Inna wada może się ujawnić, gdy nasz obiekt będzie spory. Widywałem już wielkie okienka alert - rzecz mało praktyczna.

Zatem jeśli chcielibyśmy mieć bardziej uniwersalną funkcję działającą jak print_r() - skorzystajmy z Firebuga. W konsoli tego narzędzia wyświetlimy strukturę obiektu z możliwością zwijania i rozwijania zagnieżdżonych tabel i obiektów. Skrypty na stronie nie zostaną wstrzymane, całość będzie można przewijać - pełna wygoda.

Nie masz jeszcze Firebuga? http://getfirebug.com

Nie korzystasz i nie chcesz korzystać z Firefoxa - Firebug Lite jest dla Ciebie: http://getfirebug.com/firebuglite

Do dzieła

function fbprint_r(object,objectName,isChild){

if (null == isChild) console.group(objectName);

for(x in object) {

    if ('object' == typeof object[x]){

         console.group(x);

         fbprint_r(object[x], "", 1);

         console.groupEnd();

     } else if ('function' != typeof object[x]){

         console.log(x + " : " + object[x]);

     }

}

if (null == isChild) console.groupEnd();

}

teraz weźmy ten sam obiekt, który yarpo wrzucił do swojego print_r() i wyświetlmy go naszym sposobem:

var obj = {'c' : {'a' : 'sialala', 'b' : 'sieleel'}, 'f' : 'sss', 'x' : [1,2,3]};

fbprint_r(obj,"obj");

Zaglądamy do konsoli Firebuga i mamy co chcieliśmy - nasz obiekt jest rozpisany na poszczególne grupy, które można zwijać i rozwijać. Rozmiar konsoli można dopasować do potrzeb, zminimalizować, ponownie otworzyć - pełna elastyczność.

A teraz trzeci powód do radości - wszystko to jest niepotrzebne. Firebug posiada zakładkę DOM, w której dostajemy pełną zawartość drzewa dokumentu, ale nie tylko. Są tam też przeróżne właściwości oraz - tak, to czego szukamy: zmienne skryptów wywołanych na stronie. Odnajdujemy w spisie nazwę naszej zmiennej obj i mamy cały obiekt podany na tacy. Jeśli nie chce nam się przeszukiwać (często obszernej) listy, możemy w skrypcie na stronie wstawić:

console.log("obj", obj);

W oknie konsoli pojawi się odnośnik, który zaporwadzi nas wprost do naszego obiektu na zakładce DOM Firebuga