console.
Wypisuje wartości w konsoli przeglądarki. Obiekt console ma też metody warn(), error(), table(), group(), time(), count() i assert().
- Zwraca
undefined
Przykład
#const user = { name: 'Ania', level: 7 }
const badges = ['Start', 'Seria 7 dni']
console.log('Witaj,', user.name)
console.log('Poziom:', user.level, 'Odznaki:', badges.length)
console.log(user)
console.log(badges)
console.info('Odblokowano moduł 3')
console.warn('Zostały 2 jednostki paliwa')
console.error('Nie udało się zapisać postępu')W konsoli pod przykładem ostrzeżenie i błąd mają inne kolory niż zwykłe wpisy. W narzędziach deweloperskich przeglądarki obiekty i tablice można dodatkowo rozwinąć.
Definicja i zastosowanie
#Metoda console.log() wypisuje w konsoli narzędzi deweloperskich dowolne wartości: napisy, liczby, tablice, obiekty czy elementy DOM. W Chrome konsolę otworzysz klawiszem F12 albo skrótem Ctrl+Shift+J (na Macu Cmd+Option+J). Metoda przyjmuje wiele argumentów i wypisuje je w jednym wierszu, oddzielone spacjami. To najprostszy sposób, żeby podejrzeć, co dzieje się w programie.
Obiekt console ma więcej metod. console.info(), console.warn() i console.error() działają jak log(), ale oznaczają wagę komunikatu: ostrzeżenia są żółte, błędy czerwone, a w narzędziach można je filtrować. console.table() pokazuje tablicę obiektów jako tabelę, a console.group() i console.groupEnd() zbierają wpisy w zwijaną grupę.
Przy szukaniu błędów przydają się też liczniki i pomiary: console.count(etykieta) liczy, ile razy wykonał się dany fragment kodu, console.time() i console.timeEnd() mierzą czas między dwoma miejscami, a console.assert(warunek, komunikat) wypisuje błąd tylko wtedy, gdy warunek jest fałszywy.
Konsola przeglądarki pokazuje obiekty „na żywo”: po rozwinięciu obiektu widzisz jego aktualny stan, a nie ten z chwili wypisania. Jeśli potrzebujesz migawki, wypisz kopię, np. console.log(structuredClone(obiekt)) albo JSON.stringify(obiekt).
Składnia
#console.log(value1, value2, …)
console.info(…)
console.warn(…)
console.error(…)
console.table(data)
console.group(label)
console.groupEnd()
console.count(label)
console.time(label)
console.timeEnd(label)
console.assert(condition, message)Parametry
#value1…valueN
dowolne wartości
Wartości do wypisania. Kilka argumentów pojawi się w jednym wierszu, oddzielonych spacjami.data
tablica lub obiekt
Wconsole.table(): dane do pokazania w tabeli, najczęściej tablica obiektów.label
opcjonalny, napis
Etykieta grupy, licznika albo pomiaru czasu. Liczniki i pomiary bez etykiety używają nazwy"default".condition
dowolna wartość
Wconsole.assert(): warunek. Komunikat pojawi się tylko wtedy, gdy warunek jest fałszywy.
Więcej przykładów
#const ranking = [
{ name: 'Ania', points: 320 },
{ name: 'Kuba', points: 280 },
{ name: 'Ola', points: 250 }
]
console.table(ranking)Konsola na tej stronie wypisuje dane tak jak console.log(). W narzędziach deweloperskich przeglądarki zobaczysz prawdziwą tabelę z kolumnami (index), name i points.
console.group('Moduł 1: HTML')
console.log('Lekcja 1: Znaczniki')
console.log('Lekcja 2: Atrybuty')
console.groupEnd()
for (const answer of ['A', 'C', 'A']) {
console.count(answer)
}
console.time('sortowanie')
Array.from({ length: 10000 }, () => Math.random()).sort()
console.timeEnd('sortowanie')Moduł 1: HTML Lekcja 1: Znaczniki Lekcja 2: Atrybuty A: 1 C: 1 A: 2 sortowanie: 3.2109375 ms
Konsola na tej stronie nie obsługuje tych metod, dlatego przykład się nie uruchamia. Wynik pokazuje, co wypisze Chrome: wpisy z grupy są wcięte i można je zwinąć, a zmierzony czas będzie inny przy każdym uruchomieniu.
function addPoints(user, points) {
console.assert(points > 0, `Nieprawidłowa liczba punktów: ${points}`)
user.points += points
}
const user = { name: 'Kuba', points: 100 }
addPoints(user, 20)
addPoints(user, -5)
console.log(user.points)Assertion failed: Nieprawidłowa liczba punktów: -5 115
Wynik pochodzi z konsoli Chrome, bo konsola na tej stronie nie obsługuje console.assert(). Metoda nie przerywa programu, tylko wypisuje błąd, dlatego punkty i tak zostały odjęte. Gdy dalsze działanie nie ma sensu, rzuć wyjątek przez throw.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wypisuj zmienne w obiekcie:
console.log({ points, level })pokaże nazwy razem z wartościami, np.{ points: 120, level: 3 }. - Tablice obiektów oglądaj przez
console.table(). Porównanie wielu wierszy w tabeli jest dużo łatwiejsze niż w zwiniętych obiektach. - Przed publikacją strony usuń zbędne
console.log(). Dużo wpisów spowalnia stronę, a wypisane dane może zobaczyć każdy, kto otworzy konsolę.
Powiązane hasła
#- JSON.stringify()Zamienia wartość JavaScript, np. obiekt lub tablicę, na napis w formacie JSON.
- structuredClone()Tworzy głęboką kopię wartości, łącznie z zagnieżdżonymi obiektami, datami, Map i Set.
- Template literalsSzablony tekstowe w odwróconych apostrofach: wstawiają wartości przez ${} i mogą zajmować wiele linii.
- ErrorWbudowany obiekt błędu z komunikatem i śladem stosu. Podstawa wyjątków i własnych klas błędów.
- try...catchPrzechwytuje błędy rzucone w bloku try i obsługuje je w catch. Opcjonalny finally wykona się zawsze.
Widzisz błąd albo brakuje przykładu? Napisz do nas.