Różne oblicza consol

Otwórz swoją konsolę w przeglądarce.

Przejdź do artykułu

Otwórz konsolę przeglądarki aby zobaczyć działanie poszczególnych metod obiektu console. Sposób wyświetlania się poszczególnych metod może różnić się w zależności od przeglądarki. Otwieranie konsoli w przeglądarkach

Kod użyty w przykładzie.

Pokaż kod JavaScript 
{
  console.log(
    "%cPoniżej przestawienie róznych metod obiektu consol. Sposób wyświetlania może rożnić się w zależności od przeglądarki. W przykładzie nie ujęto console.clear(), któa czyści zawartość konsoli w przeglądarce.",
    "display: block; margin: 5px 0; padding: 15px 27px; background-color: #d35400; color: #ecf0f1; font-size: 14px;"
  );
  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład kolorowego console.log()");
  console.log(
    "%cStylizowany consol.log - www.magiafrontu.pl",
    "color: #f3c5ff; font-size: 18px; background-color: #833998; padding: 15px;"
  );

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.error()");
  console.error("Pobieranie danych nie powiodło się...");

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.warn()");
  console.warn("Tak można wyświetlić ostrzeżenie!");

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.info()");
  console.info("To jest jakaś informacja.");

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.debug()");
  console.debug("Każdy programista debaguje kod.");

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.table()");
  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.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.dir()");
  const giant = {
    Marka: "Giant",
    Model: "Propel",
    Cena: 31000,
  };
  console.dir(giant);

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.assert()");
  console.assert(1 === 2, "To się nie zgadza!");

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.group() i console.groupEnd()");
  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.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.time() i console.timeEnd()");
  console.time("Czas wykonania pętli");
  for (let count = 0; count <= 1000000; count++) {
    // tutaj kod od wykonania
  }
  console.timeEnd("Czas wykonania pętli");

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.trace()");
  function funkcjaA() {
    funkcjaB();
  }
  function funkcjaB() {
    console.trace("Ślad stosu");
  }
  funkcjaA();

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );
  console.log("Poniżej przykład console.count() i console.countReset()");
  console.count("Liczenie");
  console.count("Liczenie");
  console.countReset("Liczenie");
  console.count("Liczenie");
}