Javascript console.log (). Porady i wskazówki

Polecenie console.log ()

Pierwszą rzeczą, jaką możemy zrobić, jest zarejestrowanie samego obiektu konsoli, aby zobaczyć, co faktycznie oferuje wybrana przeglądarka.

console.log(console);

To polecenie wyświetli różne właściwości obiektu konsoli, w taki sposób w jaki zna je dana  przeglądarka. Większość z nich to funkcje i będą raczej spójne niezależnie od przeglądarki. Jeżeli istnieją jakieś różnice we właściwościach obiektu konsoli w różnych przeglądarkach, to właśnie w ten sposób możecie te różnice dostrzec. Jedną z różnic, które można wskazać między przeglądarkami Firefox i Chrome, jest to, że Chrome zapewnia właściwość „memory”, która generuje podstawowe statystyki wykorzystania pamięci. Firefox nie zapewnia tej właściwości, a mimo to ma właściwość „name”, której Chrome nie posiada.

console.table ()

W poprzednim przykładzie widzieliście, co się dzieje, gdy umieścimy tablicę lub obiekt wewnątrz console.log () lub console.dir (). Istnieje inna opcja dla tych typów danych, umożliwiająca bardziej uporządkowany sposób wyświetlania, czyli console.table ().

Oto prosty przykład:

let basicArray = [

  'one',

  'two',

  'three'

];

console.table(basicArray);

Przykład  podstawowej tablicy Chrome table()

Przykład podstawowej tablicy Firefox table()

Styling the output

Kolejną potencjalnie przydatną i zabawną rzeczą jest to, że możesz zastosować style CSS do wyjścia konsoli. Działa podobnie jak metoda zastępowania ciągów, w której wstawiamy zmienną % c dla stylów, które mają być zastosowane z parametrów.

Oto prosty przykład:

console.log('%cThis is large red text', 'color: red; font-size: 30px;');

Stylizacja konsoli w Chrome

Stylizacja konsoli w Firefox

Przy odrobinie pracy i eksperymentów możecie stworzyć w konsoli ciekawe komunikaty. Jednym z pomysłów jest zwrócenie dodatkowej uwagi na konkretny dziennik, zwłaszcza na jakiś błąd.

console.log('%cHello there!', `

  background: white;

  border: 3px solid red;

  color: red;

  font-size: 50px;

  margin: 40px;

  padding: 20px;

`);

Niestandardowa stylizacja – Chrome

console.dir () & console.dirxml ()

Główną ideą tych dwóch poleceń jest wyświetlenie właściwości obiektu Javascript za pomocą console.dir (), albo elementów pokrewnych XML / HTML za pomocą console.dirxml (). Chrome ma je zaimplementowane zgodnie z oczekiwaniami, podczas gdy Firefox po prostu używa obu aliasów dla console.log ().

Dajmy, więc polecenia console.log (), console.dir () i console.dirxml () i zobaczmy, co otrzymamy. Pamiętajcie, że normalnie nie logowalibyście obiektu za pomocą console.dirxml ().

const count = {

  one: 'one',

  two: 'two',

  three: 'three'

};

console.log(count);

console.dir(count);

console.dirxml(count);

Przykład dir() i dirxml() – przeglądarka Chrome

Przykład dir() i dirxml() – przeglądarka Firefox

console.assert ()

Polecenie console.assert () jest podobne do polecenia błędu wspomnianego wcześniej. Różnica polega na tym, że asercja pozwala na użycie warunku logicznego w celu określenia, czy powinien on wprowadzić tekst do konsoli.

Załóżmy na przykład, że chcecie przetestować wartość zmiennej i upewnić się, że nie jest większa niż określona wartość liczbowa. Jeśli zmienna jest poniżej tej liczby, a warunek przyjmuje wartość prawdziwą, polecenie assert nic nie zrobi. Jeśli warunek będzie fałszywy, zostanie wyświetlony tekst wyjściowy. Tym sposobem nie musisz wpisywać console.error() wewnątrz if’a, jeśli wiadomość o błędzie jest potrzebna na pierwszym miejscu.let value = 10;

console.assert(value <= 7, 'The value is greater than 7.');

Przykład assert() – przeglądarka Chrome

Przykład assert() – przeglądarka Firefox

console.count ()

Czy zastanawiałeś się kiedyś, ile razy w Twoim kodzie dzieje się określona rzecz? Na przykład, ile razy dana funkcja jest wywoływana podczas sekwencji zdarzeń? W tym miejscu może pomóc polecenie console.count ().

Samo polecenie count jest raczej proste i ma ograniczone zastosowanie. Jeśli użyjesz polecenia w jego stanie domyślnym, otrzymasz tylko prostą liczbę. Na przykład, jeśli wywołasz to trzy razy z rzędu, otrzymamy liczbę sekwencyjną.

console.count();

console.count();

console.count();

Przykład default count() – przeglądarka Chrome

console.time (), console.timeLog (), console.timeEnd ()

Tutaj możecie zapoznać się z prostym sposobem rejestrowania, ile czasu zajmuje wykonanie jakiejś czynności. Wywołujemy console.time () z etykietą, wywołujemy console.timeLog () z tą samą etykietą dla aktualizacji i ponownie wywołujemy console.timeEnd () z tą samą etykietą, aby zatrzymać licznik czasu.

console.time('this is a timer');

console.timeLog('this is a timer');

console.timeEnd('this is a timer');

Przykład time() – przeglądarka Chrome

Przykład time() – przeglądarka Firefox

console.group () & console.groupEnd ()

Oto prosty przykład: zgrupujcie różne wyjścia konsoli, aby pokazać rodzaj relacji między nimi. Polecenie console.group() ma nieco ograniczone funkcje, więc jego użyteczność będzie w dużej mierze zależeć od tego, jak planujecie go używać.

Możecie także zagnieżdżać grupy. Polecenie console.groupEnd () po prostu odnosi się do ostatnio otwartej grupy.

console.group('outer group');

console.log('outer one');

console.log('outer two');

console.group('inner group');

console.log('inner one');

console.log('inner two');

console.log('inner three');

console.groupEnd();

console.log('outer three');

console.groupEnd();

Przykład nested group()

console.trace ()

Kolejne, bardzo przydatne polecenie! Podczas debugowania głęboko zagnieżdżonych obiektów lub funkcji możemy chcieć wydrukować ślad stosu kodu. Aby to zrobić, należy wywołać console.trace () z poziomu funkcji, którą chcecie mieć na górze call stack, aby zobaczyć dokładne miejsca w kodzie, które go wywołały.

Dip Vachhani – Jestem Fullstack Developerem (początkującym) z doświadczeniem w zakresie samodzielnego projektowania w Bootstrap JavaScript React Node.js i MongoDB.