Opanować konsolę przeglądarki – debugowanie przez logowanie

Jedną z najprostszych metod na sprawdzenie wartości zmiennej jest funkcja console.log(). Potrafi wyświetlić w konsoli przeglądarki wszystkie typy zmiennych: prymity, tablice, obiekty, tablice obiektów itd. Obiekt console ma też kilka innych przydatnych funkcji, dowiesz się o nich w niniejszym wpisie.

Zanim zaczniemy przypominam że obiekt console nie jest częścią jakiegokolwiek standardu, dlatego też nie używaj go na produkcji, a jeśli już musisz – rób to z rozwagą. Jak? Przede wszystkim upewnij się czy obiekt console i jego metoda której chcesz użyć istnieją. Jeśli nad projektem czuwa linter, będziesz musiał go wyłączyć gdyż będzie zgłaszał błąd. Najprościej zrobić włąsną funkcję do logowania i korzystać z niej w swojej aplikacji:

function loguj(...args) { if ('undefined' !== typeof console && 'undefined' !== typeof console.log) { console.log.apply(console, args); } }

Aby zobaczyć co wyświetla konsola przeglądarki możesz użyć skrótów: F12, CTRL+SHIFT+i, CTRL+SHIFT+c. Następnie znajdź zakładkę „console” lub „konsola”.

W dalszej części przedstawię najbardziej wg. mnie przydatne metody do logowania informacji. Możesz sprawdzić ich wynik bezpośrednio w przeglądarce (np. na tym blogu) wklejając zawarte tu przykłady.

console.log()

Główny bohater potrafi wyświetlić praktycznie wszystkie typy zmiennych. Podając kila argumentów funkcji, wartości wyświetlą się w jednej linii, natomiast kolejne wywołanie wyświetli tekst już w nowej.

console.log('test', 1, true, {foo: 'Jazz jest super'}, [{bar: 'Javascript też'}]);

Output:

Output

Funkcja log potrafi też wyświetlić w bardzo czytelny sposób obiekty DOM.

Po kliknięciu prawym przyciskiem myszy na element w konsoli wyświetli się menu kontekstowe. Najbardziej przydatna funkcja: Reveal in Elements Panel – wskaże element w drzewie DOM. Jeśli tego nie zrobi oznacza to że wyswietlony element nie jest już „wpięty” w DOM a Ty powinieneś się zastanowić czy nie masz wycieków pamięci 😉

console.table()

Wyświetla w formie tabelki takie dane jak obiekty, czy tablice.

console.table({firstname: 'Paul', lastname: 'Jones'});

Output:

Ma jednak tą wadę że w odróżnieniu od console.log po przyjęciu dwóch parametrów nie wyświetli dwóch tabel. Można jednak nieco to obejść:

const item1 = {firstname: 'Paul', lastname: 'Jones'}; const item2 = {firstname: 'Jay', lastname: 'McShann'}; console.table({item1, item2});

Ale tak naprawdę funkcja table najlepiej sprawdza się w tablicach:

const item1 = {firstname: 'Paul', lastname: 'Jones'}; const item2 = {firstname: 'Jay', lastname: 'McShann'}; console.table({item1, item2});

Przy większej ilości danych to naprawdę pomaga, szczególnie gdy mamy do czynienia z kolekcjami danych.

console.group()

Grupowanie jest szczególnie przydatne gdy wyświetlasz w konsoli dużo informacji.

console.group('loop1'); console.log(index); console.group('loop2') console.log(index2); console.groupEnd() console.groupEnd();

Output:

Zanim dowiedziałem się o tej funkcji robiłem wcięcia z ciągów znaków:

console.log('===>', foo);

Jako tako działało 🙂

Możesz też użyć funkcji console.groupCollapsed – w przeciwieństwie do group wyswietla grupy zawinięte.

console.trace()

Sztos, funkcja wyświetla stos wywołań od początku do punktu wywołania tejże funkcji. Mega przydatne gdy nie wiesz skąd dany fragment kodu jest wywoływany a nie możesz uruchomić debugera.

Zanim dowiedziałem się o tej funkcji używałem wyjątków, też zwracają stos wywołań 🙂

throw new Error('debug');

console.time()

Mierzy czas wykonania kodu. Jeśli do tej pory używałeś setTimeout to właśnie powinieneś przestać. SetTimeout() nie jest miarodajny ponieważ jest zbyt zależny od Event Loop. W skrócie, jeśli inny fragment kodu wykona się zbyt długo, może spowodować że Twoja funkcja do mierzenia czasu wykona się z opóźnieniem i wyliczony czas nie będzie poprawny.

Timery możesz grupować wg. nazwy podajej w argumencie metody, w przeciwnym wypadku grupa otrzyma nazwę „default”.

console.time(); console.time('1'); fn1() console.time('2'); fn2() console.timeEnd('1'); console.timeEnd('2'); console.timeEnd();

Output:

Czy to wszystko?

Obiekt console posiada jeszcze więcej możliwości, ja wymieniłem tylko te najbardziej przydatne. Można logować wiadomości w różnych kolorach w zależności od kontekstu, np.

  • console.error() – logowanie błędów
  • console.warn() – logowanie ostrzeżeń
  • console.info() – wiadomości informacyjne

Console.log() oferuje jeszcze zmianę wyglądu wyświetlanego tekstu, można by uznać to za mało przydatne jednak Facebook zrobił z tego niezły użytek 🙂

Na produkcji

Obiekt console nie jest częścią jakiegokolwiek standardu a mimo tego praktycznie wszystkie przeglądarki go implementują. Mimo wszystko jest to narzędzie dla developerów i dobrą praktyką jest nie używanie go w środowisku produkcyjnym.

W przypadku gdy musisz użyć konsoli na produkcji zrób to w jednym miejscu, tj. wrzuć do własnej funkcji.

Jeśli nad projektem czuwa linter, będziesz musiał go wyłączyć gdyż będzie zgłaszał błąd.

Przykład:

function loguj(...args) { /* eslint-disable */ console.log.apply(console, args); /* eslint-enable */ }

Podsumowanie()

Okazuje się że sporo developerów korzysta z console.log. Tak się już utarło że jest to najszybszy sposób na sprawdzenia co kryje nasz kod, mimo że mamy dostępne świetne debuggery, zarówno na frontach jak i na backendzie.

Zdjęcie: Markus Spiske

Dodaj komentarz

Twój adres email nie zostanie opublikowany.