JavaScript debuggen met de Console API

Onlangs kwam ik een aantal mooie methodes van de Console API tegen om JavaScript te debuggen. In dit blogbericht zal ik daar meer over vertellen.

Voor wie nog steeds werkt met alert() in zijn JavaScript, er zijn handiger manieren om te debuggen. Naast console.log(), zijn er ook console.error(), console.warn(), console.info() en console.debug() zijn. In dit stukje een aantal voorbeelden en toepassingen.

// welke nummers staan er in n?
var n = [1,2,3,4,5,6,7,8,9];

for(var i = 0; i < n.length; i++){
    alert("nummer " + n[i]);
}

// maak je klaar om oneindig op OK te klikken.

Door console.log() te gebruiken in je JavaScript, kun je in elke console van de moderne browser zien wat er gebeurd. Super handig. Er zijn verschillende variaties van console.log().

// welke nummers staan er in n?
var n = [1,2,3,4,5,6,7,8,9];

console.error('Ooops', n);
console.warn('Let op!', n);
console.info('Nummer', n);
console.debug('n', n);

console.all_ Daarnaast zitten er nog meer handige functies in. Zo kun je met console.group() en console.groupEnd() logging groeperen. De groepen kun je genest gebruiken, waardoor het overzichtelijk blijft.

var n = [12,24,36,48,50,6,67,28,9],
    i = n.length,
    v,
    g = -1;

// groep openen
console.group('Start nummers', n);

while(i--){
    v = n[i];
    console.log('Key: %s value: %d', i, v);

    if(v > g){
       g = v;
       console.info('Value %d is groter!', v);
    }
}

//groep sluiten
console.groupEnd();

console.warn('Value %d is de grootste', g);

4 Wanneer je wilt dat een groep dichtgeklapt blijft gebruik je console.groupCollapsed() in plaats van console.group(). Zoals je in het code voorbeeld hierboven kunt zien kun je formatting gebruiken om een string en nummers in te vullen. Hieronder nog een aantal voorbeelden.

var s = 'World', // string
    d = 42, // integer
    f = 3.14159, // floating point
    o = document.querySelectorAll('.prettyprint'), // Elementen uit de DOM
    O = {a:1, b:2, c:{d:4, e:5}}; // Objecten

console.log('Hello %s', s);
// Hello World
console.log('%d: The answer to life, the universe and everything', d);
// 42: The answer to life, the universe and everything
console.log('? ? %f', f);
// ? ? 3.14159
console.log('Alle `.prettyprint` elementen %o', o);
// Alle `.prettyprint` elementen [pre.prettyprint.language-js.linenums, pre.prettyprint.language-js.linenums, …]
console.log('Het Object %O', O);
// Het Object ›Object

Als laatste wil ik nog laten zien wat console.time() en console.timeEnd() kunnen doen. Met deze functies kun je de tijd van het verwerken meten.

console.time('Tijd array');
var a = new Array(1000000);

for (var i = a.length - 1; i >= 0; i--) {
    a[i] = new Object();
};
console.timeEnd('Tijd array');
// Tijd array: 1787.412ms

Er zijn nog veel meer mogelijkheden met de Console API, deze kun je vinden op de volgende pagina. Bij Flusso vinden wij het belangrijk om de moed te hebben om kennis te delen met je collega’s, vragen durven te stellen en samenwerken op basis van gelijkwaardigheid, dat is ITkracht_van_Flusso. Dus mocht je nog vragen hebben, neem gerust contact op!

peter