Picture

Zdravím, jmenuji se Emil Cieslar.

Jsem programátor se zaměřením na frontend pomocí AngularJS. Backend mi také není cizí, na něj používám Nette (občas NodeJS). Stále se učím nové věci, které rád sdílím s ostatními. Žiji svým vlastním tempem ve společnosti Webkreativ, s.r.o., která má stejné zaměření jako já.

Více o mne →

 (Emil & Web)

Užitečný console.table()

Jak přehledně zobrazit data v consoli

  • console.table()
  • Chrome Dev Tools

Věřím, že jste se mnohokrát setkali s tím, že jste chtěli zobrazit data v konzoli. Např. pro kontrolu, co máte uvnitř objektu. Klasickou cestou byste napsali asi následující kód.

var User = function User(name, age) {
    this.name = name;
    this.age = age;
};

var emil = new User('Emil', 26);
var jakub = new User('Jakub', 25);
var karel = new User('Karel', 42);

var users = {
    emil: emil,
    jakub: jakub,
    karel: karel
};

console.log(users);

Console table

Tímto způsobem ale musíte každou část objektu otevírat, abyste si data jednotlivých objektů zobrazili. Proč to ale neudělat jednodušeji a přehledněji? Stačí malá úprava. Změna console.log() na console.table() a všechna data se nám krásně zobrazí v tabulce.

var User = function User(name, age) {
    this.name = name;
    this.age = age;
};

var emil = new User('Emil', 26);
var jakub = new User('Jakub', 25);
var karel = new User('Karel', 42);

var users = {
    emil: emil,
    jakub: jakub,
    karel: karel
};

console.table(users);

Pokud tedy vložíte předchozí kód do vašeho .js souboru a podívate se do konzole, budete velmi překvapení přehledností.

Console table

Reference

  1. https://egghead.io/lessons/javascript-logging-pretty-printing-tabular-data-to-the-console
  2. https://developers.google.com/web/tools/chrome-devtools/debug/console/structured-data?hl=en

Komentáře