czwartek, 2024-01-04

JS: Metoda console.log()

Metoda console.log() w JavaScript jest jedną z najczęściej używanych funkcji do debugowania i logowania informacji podczas tworzenia aplikacji. Wypisuje przekazane do niej dane na konsoli deweloperskiej przeglądarki lub środowiska wykonawczego (np. Node.js). Metoda console.log() może być używana na różne sposoby i mieć różne zastosowania.

Sprawdzanie aktualnej wartości

Najprostszym i najczęstszym zastosowaniem jest wypisywanie wartości zmiennych, stałych lub wyrażeń w celu sprawdzenia ich wartości podczas wykonywania programu.

let zmienna = "Witaj, świecie!";
console.log(zmienna);

Wypisywanie wielu wartości

Metoda console.log() może przyjąć wiele argumentów i wypisać je wszystkie w jednej linii.

let imie = "Anna";
let wiek = 25;
console.log("Imię:", imie, "Wiek:", wiek);

Łączenie tekstu i zmiennych (template strings)

Możesz używać szablonów stringów (template strings) z użyciem backticków (`) oraz ${...}, aby wpleść zmienne w ciąg tekstowy.

console.log(`Imię: ${imie}, Wiek: ${wiek}`);

Logowanie obiektów i tablic

Metoda console.log() może być używana do wyświetlania zawartości obiektów i tablic, co jest przydatne do ich analizy.

let osoba = { imie: "Anna", wiek: 25 };
console.log(osoba);

Debugowanie funkcji

Inne zastosowanie console.log() to śledzenie przepływu wykonania programu, w tym weryfikacja, czy dana część kodu została wykonana i jakie wartości mają zmienne w różnych punktach.

function dodaj(a, b) {
  console.log("Dodawanie:", a, "+", b);
  return a + b;
}

console.log("Wynik:", dodaj(5, 7));

Logowanie błędów

Chociaż do logowania błędów częściej używa się console.error(), console.log() może realizować takie zadanie.

Grupowanie Logów

Dla lepszego porządku można grupować logi, używając console.group() i console.groupEnd().

console.group("Szczegóły użytkownika");
console.log("Imię:", imie);
console.log("Wiek:", wiek);
console.groupEnd();

Dane jako tabela

Używając console.table(), można wyświetlić dane (szczególnie tablice obiektów) w formacie tabeli, co poprawia ich czytelność.

const ckziu = {name: 'CKZiU', city: 'Mrągowo'};
console.log(console.table(ckziu));

Dodawanie stylów CSS

Do logów w konsoli można dodawać style CSS.

console.log("%cTekst w kolorze i dużym rozmiarze", "color: blue; font-size: x-large");

Uwagi

• Nadmiernie używanie console.log(): Nadużywanie tej metody może uczynić konsolę trudną do odczytania, dlatego warto korzystać z niej z umiarem.
• Wydajność: Nadmierna ilość logów może wpływać na wydajność aplikacji, szczególnie w środowiskach produkcyjnych.
• Bezpieczeństwo: Należy unikać logowania wrażliwych informacji, takich jak hasła czy dane osobowe użytkowników, zwłaszcza w środowisku produkcyjnym.