Sådan bruges JavaScript-konsollen: går ud over console.log ()

En af de nemmeste måder at fejle noget i JavaScript er ved at logge ting ved hjælp af console.log. Men der er mange andre metoder leveret af konsollen, der kan hjælpe dig med at debugge bedre.

Lad os komme igang.

Den meget grundlæggende brugssag er at logge en streng eller en masse JavaScript-objekter. Ganske enkelt,

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

Forestil dig nu et scenarie, når du har en masse objekter, du skal logge på konsollen.

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

Den mest intuitive måde at logge på er bare den console.log(variable)ene efter den anden. Problemet er mere tydeligt, når vi ser, hvordan det vises på konsollen.

Som du kan se, er ingen variabelnavne synlige. Det bliver ekstremt irriterende, når du har en masse af disse, og du skal udvide den lille pil til venstre for at se, hvad variablen hedder. Indtast navne på beregnet ejendom. Dette giver os grundlæggende mulighed for at klubbe alle variablerne sammen i en enkelt, console.log({ foo, bar });og output er let synlig. Dette reducerer også antallet af console.loglinjer i vores kode.

console.table ()

Vi kan tage dette et skridt videre ved at lægge alle disse sammen i en tabel for at gøre det mere læsbart. Når du har genstande med fælles egenskaber eller en række objekter bruger console.table(). Her kan vi bruge console.table({ foo, bar})og konsollen viser:

console.group ()

Dette kan bruges, når du vil gruppere eller rede relevante detaljer sammen for nemt at kunne læse logfilerne.

Dette kan også bruges, når du har et par logsætninger inden for en funktion, og du vil være i stand til tydeligt at se omfanget svarende til hver sætning.

Hvis du f.eks. Logger en brugers detaljer:

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();

Du kan også bruge i console.groupCollapsed()stedet for, console.group()hvis du ønsker, at grupperne skal skjules som standard. Du bliver nødt til at trykke på deskriptor-knappen til venstre for at udvide.

console.warn () & console.error ()

Afhængig af situationen kan du tilføje logfiler ved hjælp af console.warn()eller for at sikre, at din konsol er mere læselig console.error(). Der er også, console.info()der viser et 'i' ikon i nogle browsere.

Dette kan tages et skridt videre ved at tilføje brugerdefineret styling. Du kan bruge et %cdirektiv til at tilføje styling til enhver logerklæring. Dette kan bruges til at skelne mellem API-opkald, brugerbegivenheder osv. Ved at holde en konvention. Her er et eksempel:

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');

Du kan også ændre font-size, font-styleog andre CSS ting.

console.trace ()

console.trace()udsender et stakspor til konsollen og viser, hvordan koden endte på et bestemt tidspunkt. Der er visse metoder, du kun vil ringe til en gang, som at slette fra en database. console.trace()kan bruges til at sikre, at koden opfører sig som vi ønsker det.

console.time ()

En anden vigtig ting, når det kommer til frontend-udvikling, er at koden skal være hurtig. console.time()tillader timing af bestemte operationer i koden til test.

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");

Forhåbentlig leverede artiklen nogle oplysninger om forskellige måder at bruge konsollen på. Hvis du har spørgsmål eller vil have mig til at uddybe, bedes du give mig en note nedenfor eller kontakte mig på twitter eller e-mail.