Pokud vyvíjíte jakýkoli druh webu, pravděpodobně používáte hodně console.log(x) při ladění aplikací. Je to straghghtforward způsob, jak zjistit, co se děje ve vašem kódu. Ale objekt konzoly má několik dalších metod, které vám mohou pomoci lépe ladit vaše aplikace.

Základy
Můžete samozřejmě tisknout řetězce:
console.log("Where am I?")

a také předměty:

const foo = { id: 1, name: 'Joe', age: 12 }
console.log(foo);

Problém je v tom, že to dá následující výstup:

Ve skutečnosti nevidíte název proměnné foo. To může být nepříjemné při ladění s mnoha výstupy. Naštěstí to můžeme opravit pomocí console.log takto:

console.log({foo})

což dává následující výstup:

console.warn() a console.error()

Mnoho lidí také zapomíná na naše přátele console.warn() a console.error() , které lze použít ke zvýšení čitelnosti vaší konzole. console.info() je také k dispozici a některé prohlížeče pro něj zobrazí speciální ikonu.

console.group()

Výstup velkého množství protokolů nebo chyb? Ve skutečnosti je můžete vnořit do console.group, aby byly vaše protokoly snadněji čitelné. To je skvělé pro zajištění toho, že rozsah každého příkazu protokolu je jasně vymezen.

Podívejte se například na tyto protokoly nákupního košíku:

console.group('Shopping Cart');

console.log('user: John Doe');

// First Shopping Item

console.group('Shopping item');

console.log('Name: JS Book 1');

console.log('Author: Unknown author');

console.log('ISBN: 048665088X');

console.groupEnd();

// Second Shopping Item

console.group('Shopping item');

console.log('Name: JS Book 2');

console.log('Author: Unknown author');

console.log('ISBN: 048665087X');

console.groupEnd();

console.groupEnd();

To poskytne následující výstup:

console.table()

To ve skutečnosti umístí objekty do pěkné tabulky, aby byla čitelnější. Pokud máte objekty se společnými vlastnostmi nebo pole objektů, můžete použít console.table() aby to bylo čitelnější. Definujme například několik objektů:

const a = {id: 1, a: "a", b: "b"}
const b = {id: 1, a: "a", b: "b"}
const c = [a, b]

console.table({a, b})
console.table(c)

Toto je výstup:

console.trace()

To vám ukáže cestu hovoru, kterou se dostanete k bodu, ve kterém voláte [console.trace](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace)()

console.time()

Spustí časovač, pomocí kterého můžete sledovat, jak dlouho operace trvá. Každému časovači dáte jedinečný název a na dané stránce může běžet až 10 000 časovačů. Když zavoláte [console.timeEnd](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd)() se stejným názvem, prohlížeč vypíše čas v milisekundách, který uplynul od spuštění časovače.

console.time();

for (let i = 0; i < 100000; i++) {

// some code

}

console.timeEnd();

console.clear()

Docela intuitivní, vymaže konzolu od všech nahromaděných zpráv.

console.dir()

Tím se vytisknou všechny vlastnosti konkrétního objektu JavaScriptu v konzole, takže můžeme snadno vidět všechny dostupné vlastnosti (metody, proměnné atd.)

Závěr

Všechny tyto různé metody konzoly vám snad umožní efektivněji používat objekt konzoly k ladění vašich aplikací JavaScript.

Rádi se učíte?

Zastavte se a pozdravte můj LinkedIn!