W powszechnym użyciu przy pisaniu kodu JavaScript i sprawdzania jego działania, często używa się consol.log(). Obiekt consol z metodą log() jest najbardziej uniwersalną formą wyświetlania danych. Jednak obiekt ten posiada o wiele więcej metod, które warto znać i stosować przy debugowaniu kodu JavaScript.

Wygląd poszczególnych metod może różnić się w zależności od przeglądarki.

Zobacz demo

console.log()

Znane i używane często. Nikomu piszącemu kod w JavaScript nie trzeba tłumaczyć do czego to służy. Dodatkowym atutem metody log() obiektu consol, jest to, że można stylować wyświetlane informacje zgodnie z regułami CSS.

console.log(
    "%cStylizowany consol.log - www.magiaforntu.pl",
    "color: #f3c5ff; font-size: 18px; background-color: #833998; padding: 15px;"
);

• %c – wskazuje, że do danej treści bądą stosowane style
• drugi argument – to styl zgodny z zasadami CSS

console.error()

Pewnie nie raz w konsoli pojawił się błąd na czerwono. Za pomocą metody error() uzyskasz ten sam efekt.

console.error("Pobieranie danych nie powiodło się...");

console.warn()

Ostrzeżenie w konsoli wyświetlane na pomarańczowo.

console.warn("Tak można wyświetlić ostrzeżenie!");

console.info()

W zależności od przeglądarki komunikat ten wygląda różnie. W Chromie wygląda tak samo jak console.log(). Firefox dodaje ikonkę „i” w kółeczku.

console.info("To jest jakaś informacja.");

console.debug()

Często wygląda jak console.log().

console.debug("Każdy programista debaguje kod.");

console.table()

Wyświetla tablicę w ładnej przejrzystej formie.

const bicycle = [
    { Marka: "Giant", Model: "Propel", Cena: 31000 },
    { Marka: "Specialized", Model: "S-Works Tarmac SL8", Cena: 32000 },
    { Marka: "Pinarello", Model: "Dogma F", Cena: 31000 },
    { Marka: "Colnago", Model: "V4RS", Cena: 32000 },
];
console.table(bicycle);

console.dir()

Prezentuje obiekt w sposób strukturalny, podobnie jak console.log().

const giant = {
    Marka: "Giant",
    Model: "Propel",
    Cena: 31000,
};
console.dir(giant);

console.assert()

Wykorzystuje się go do wyświetlania błędów, kiedy warunek jest fałszywy.

console.assert(1 === 2, "To się nie zgadza!");

console.group() oraz console.groupEnd()

Pozwalają na grupowanie informacji wyświetlanych przez konsolę. Może tworzyć grupę wewnątrz już istniejącej grupy. W nawiasach metody musimy podać nazwę grupy.

console.group("Ważne informacje");
console.log("Pierwsza ważna wiadomość");
console.log("Druga informacja do przekazania");
console.log("Trzecia informacja do przeczytania");
console.groupEnd();

console.time() oraz console.timeEnd()

Jedna z ciekawszych metod, służąca do mierzenia czasu wykonywania się kodu. W nawiasach metody musimy podać nazwę minutnika. W komentarzu podziel się informacją jak szybko wykonała się u Ciebie poniższa pętla. U mnie to 4 ms.

console.time("Czas wykonania pętli");
for (let count = 0; count <= 1000000; count++) {
    // tutaj kod od wykonania
}
console.timeEnd("Czas wykonania pętli");

console.trace()

Ta metoda jest również bardzo ciekawa, gdyż pokaże ścieżkę, jaką przebył kod aby wyświetlić komunikat z konsoli. Zwróć uwagę na kolejność wyświetlania funkcji w konsoli.

function funkcjaA() {
    funkcjaB();
}
function funkcjaB() {
    console.trace("Ślad stosu");
}
funkcjaA();

W praktyce

W praktyce często bywa tak, że najczęściej wykorzystujemy console.log(), gdyż jest w stanie wyświetlić każdy rodzaj danych. Myślę jednak, że warto pamiętać choćby o console.error(), console.table() czy console.trase(). A jeżeli chcemy sprawdzić wydajność naszego kodu warto skorzystać console.time() z console.timeEnd().

Podobał się artykuł?