Skip to content

Console logging tricks

Meerdere objecten in één regel

Als je een javascript object meegeeft aan de console.log() methode, wordt deze in de console weergegeven. Meerdere objecten zou je met meerdere console.log() calls kunnen weergeven:

let powerup = {p:{x:10, y:400}, s:{w:40, h:20}, image:"powerup.png"}
let player = {p:{x:100, y:300}, s:{w:45, h:30}, image:"ship.png"}
let enemy = {p:{x:10, y:30}, s:{w:40, h:50}, image:"invader1.png"}

console.log(powerup);
console.log(player);
console.log(enemy);
console_log_separate
Dit geeft de objecten weer, maar zonder dat de naam van de variabele wordt weergegeven.

Een betere manier is om de variabelen met behulp van computed property names. Log de losse variabelen in een object:

console.log({powerup, player, enemy});

Dat scheelt een regel en de namen van de variabelen worden netjes meegeprint in de console:

console_log_computed_property
Met één regel code staan alle objecten in de console gelogd en de namen van de properties van het object zijn voor je bepaald en worden ook weergegeven.

Custom CSS styling

Wanneer je text in de console een bepaalde stijl wilt geven kan je er custom CSS stijlen aan meegeven door "%c" in de string mee te loggen:

console.log("%c Game objecten", "color:red; font-weight:bold")

geeft:

console_log_css
De CSS code geeft een dikgedrukte rode tekst

Tabel weergave

Als de objecten die je logt allemaal dezelfde eigenschappen hebben, kan je ze in een tabel weer laten geven:

console.log([powerup, player, enemy]);

Dit geeft:

console_table
De objecten worden weergegeven in een tabel. Geneste objecten (de p(osition) en de s(ize)) worden helaas niet veel duidelijker weergegeven

Tijd loggen

Als je de tijd wil weten tussen twee events kan je gebruik maken van de console.time(). Deze functie geef je een label mee zodat je weet van welk event je de verstreken tijd wilt weten. Zie het als een stopwatch:

console.time("running400m");
// Start running the 400m
console.timeEnd("running400m");

De console.timeEnd() stop de stopwatch.

console_time
Op de console wordt de tijd weergegeven tussen de calls naar console.time() en console.timeEnd()

Stack trace

Wanneer de functie: console.trace() wordt aangeroepen in een andere functie, verschijnt er informatie in de console over de context waarbinnen de functie is aangeroepen, de call stack.

Bijvoorbeeld:

function traceMe(){
    console.table([player, enemy, powerup]);
    console.trace();
}

traceMe();

levert:

console_trace
De stack trace informatie is nu nog niet zo nuttig omdat de functie vanuit de javascript console is aangeroepen.

Bronnen

Last update: December 9, 2022