A JavaScript konzol használata: túllépve a console.log ()

A JavaScript hibakeresésének egyik legegyszerűbb módja a cuccok naplózása console.log. De a konzol számos más módszert kínál, amelyek jobban segíthetnek a hibakeresésben.

Kezdjük el.

A legalapvetőbb használati eset egy string vagy egy csomó JavaScript-objektum naplózása. Egészen egyszerűen,

console.log('Is this working?');

Most képzeljen el egy forgatókönyvet, amikor van egy csomó objektuma, amelyet be kell jelentkeznie a konzolba.

const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };

A naplózás leg intuitívabb módja, ha csak console.log(variable)egymás után lépünk. A probléma nyilvánvalóbb, ha látjuk, hogyan jelenik meg a konzolon.

Mint láthatja, egyetlen változó neve sem látható. Rendkívül idegesítő, ha van egy csomó ilyen, és ki kell terjesztenie a bal oldali kis nyílot, hogy lássa, mi is pontosan a változó neve. Írja be a számított tulajdonságneveket. Ez lehetővé teszi számunkra, hogy az összes változót alapvetően egyetlen egységben egyesítsük, console.log({ foo, bar });és a kimenet könnyen látható legyen. Ez csökkenti a console.logkódunk sorainak számát is .

konzolasztal()

Ezt egy lépéssel tovább tehetjük, ha mindezeket egy táblázatba rakjuk, hogy jobban olvasható legyen. Valahányszor vannak olyan objektumok, amelyek közös tulajdonságokkal rendelkeznek, vagy sok objektumot használnak console.table(). Itt használhatjuk, console.table({ foo, bar})és a konzol megmutatja:

console.group ()

Ez akkor használható, ha a releváns részleteket össze akarja csoportosítani vagy egymásba ágyazni, hogy a naplók könnyen olvashatók legyenek.

Ez akkor is használható, ha egy függvényen belül van néhány napló utasítás, és egyértelműen szeretné látni az egyes utasításoknak megfelelő hatókört.

Például, ha naplózza a felhasználó adatait:

console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');
// Nested Groupconsole.group('Address');console.log('Street: 123 Townsend Street');console.log('City: San Francisco');console.log('State: CA');console.groupEnd();
console.groupEnd();

Használhatja a console.groupCollapsed()helyett is, console.group()ha azt szeretné, hogy a csoportok alapértelmezés szerint összecsukódjanak. A kibontáshoz meg kell nyomnia a bal oldalon található leíró gombot.

console.warn () & console.error ()

A helyzettől függően, hogy ellenőrizze, hogy a konzol olvashatóbb felveheti naplók segítségével console.warn()vagy console.error(). Van console.info()néhány böngészőben egy „i” ikon is.

Ez további lépést tehet egyedi stílus hozzáadásával. Egy %cirányelv segítségével bármilyen napló utasításhoz hozzáadhatja a stílusot. Ezzel meg lehet különböztetni az API hívásokat, a felhasználói eseményeket stb. Íme egy példa:

console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered');console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details');console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');

Azt is megváltoztathatja az font-size, font-styleés más CSS dolgokat.

console.trace ()

console.trace()verem nyomkövetést ad ki a konzolhoz, és megmutatja, hogyan került a kód egy adott pontra. Vannak bizonyos módszerek, amelyeket csak egyszer szeretne meghívni, például törölni az adatbázisból. console.trace()felhasználható annak ellenőrzésére, hogy a kód a kívánt módon viselkedik-e.

console.time ()

A frontend fejlesztésnél egy másik fontos dolog, hogy a kódnak gyorsnak kell lennie. console.time()lehetővé teszi bizonyos műveletek időzítését a kódban a teszteléshez.

let i = 0;
console.time("While loop");while (i < 1000000) { i++;}console.timeEnd("While loop");
console.time("For loop");for (i = 0; i < 1000000; i++) { // For Loop}console.timeEnd("For loop");

Remélhetőleg a cikk tartalmaz néhány információt a konzol használatának különféle módjairól. Ha bármilyen kérdése van, vagy szeretné, ha részletezném, kérem, hagyjon nekem egy megjegyzést alább, vagy forduljon hozzám twitteren vagy e-mailben.