Frontem
Published on

Postaw sobie logpointa, czyli console.log() w narzędziach developerskich.

Jak powszechnie wiadomo najlepszym narzędziem do zdebugowania, dlaczego 1 + 1 równa się 11 jest wykorzystanie console.log(), ale dzięki logpointom, które są wbudowane w narzędzia developerskie każdej nowoczesnej przeglądarki, możemy zrobić bezpośrednio tam, nie odrywając się od kontekstu.

Czym jest logpoint i jak go używać?

Logpoint w przeglądarkach opartych na Chromium czy w Firefox jest już dostępny dla programistów od dobrych kilku lat, lecz nie każdy zdaję sobie sprawę z jego istnienia. Zasada działania jest bardzo prosta. Robi dokładnie to samo co console.log(), czyli wyświetli dowolny byt (pod warunkiem jego istnienia), jaki sobie do niego przekażemy.

Logpoint w praktyce

Przechodząc do zakładki Debugger (Firefox) lub Source (Chromium), a następnie klikając lewym przyciskiem myszy na konkretnej linijce kodu w menu kontekstowym wyłania się logpoint (Chromium) lub log (Firefox).

ℹ️ Wszystkie zrzuty ekranu (oczywiście oprócz pierwszego) prezentować będą Chrome DevTools. Firefox DevTools wyglądają analogicznie, różniąc się wyłącznie delikatnie nazewnictwem czy aranżacją UI.

Dodawanie loga w przeglądarce Firefox
Dodawanie loga w przeglądarce Chrome

Wybierając logpoint mamy możliwość wpisania tam dowolnej rzeczy dostępnej w jego scope. W poniższym przykładzie wyświetlam obiekt app — który jest sercem aplikacji React Todo MVC. Po odświeżeniu strony w zakładce Console możemy zauważyć obiekt z aktualną zawartością.

Wpisywanie zawartości logpointa
Dodany logpoint

Logpointów można postawić niezliczenie wiele i w jakimkolwiek miejscu (o ile source map twojej aplikacji dobrze się generuje), a wszystkie istniejące wyświetlają się w zakładce Breakpoints, która umieszczona jest obok kodu źródłowego. Każdy logpoint można zdezaktywować klikając w kolorowy checkbox.

Nieaktywny breakpoint wyróżnia się półprzeźroczystą etykietą. Dodatkowo klikając w snippet kodu zostaniemy przeniesieni do miejsca w kodzie, gdzie owy logpoint został umieszczony.

Jeszcze więcej opcji co do zarządzania logpointem znajduje się w menu kontekstowym, klikając PPM na pojedynczy element.

Logpoint w akcji

Czy znając logpointy, mogę zapomnieć o console.log()?

Odkąd używam logpointów, bardzo ograniczyłem użycie console.log() w kodzie, ponieważ są wygodniejsze, a co najważniejsze szybsze i pewniejsze, ponieważ bez przechodzenia do edytora kodu można w błyskawiczny sposób debugować aplikację czy stronę internetową. Dodatkowo minimalizuję szansę zacommitowania niecenzuralnych słów (console.log("d**a")).

Udostępnij na Facebooku, Twitterze lub LinkedIn