Index

Snap #02
Plus loin avec la console

Derrière le console.log se cache un monde merveilleux.

Formatage CSS avancé

console.log(
  '%c JS is the new black', 
  'padding: 4px; border-left: orange solid 5px;'
);

Remplacement de chaînes

let animal = {
  name: 'dog',
  legs: 4
};

console.log('I have a %s with %i legs.', o.name, o.legs);
// --------------------------------------------------------------
%o , %O: lien hypertexte sur un objet JavaScript
%d, %i:  nombre entier
         Firefox : console.log('%.4d', 1.123456) => 0001
%s:      chaîne de caractères
%f:      nombre réél
         Firefox : console.log("%.4f", 1.1) => 1.1000

Assertion

console.assert(expression, object)
Affiche un message d’erreur dans la console si l’assertion est fausse.

const x = 5, y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});

Affichage sous forme de tableau

console.table(o)
Présente l’objet passé en paramètre sous forme de tableau (interactif)

let a = [
  {uiid: 1, x: 100, y: 200},
  {uiid: 2, x: 200, y: 200},
  {uiid: 3, x: 200, y: 210, newProp: true}
];
console.table(a);

Occurences d’exécution

console.count([uiid])
Affiche dans la console le nombre de fois où la fonction count() a été appelée (ou appelée avec le même paramètre uiid si il est renseigné).

console.countReset([uiid])
Réinitialise le décompte (ou le décompte pour le paramètre uiid si il est renseigné).

const 
  TestOuter = 'Test Outer',
  TestInner = '\tTest Inner';

let f = () => {
  console.log('Appel à f()');
  console.count(TestOuter);
  for(let i = 0; i < 2; ++i)
    console.count(TestInner);
};

f();
f();
console.countReset(TestInner);
f(2);

Pile d’exécution

console.trace([message])
Renvoie la pile d’exécution en cours.
https://fr.wikipedia.org/wiki/Trace_(informatique)

let
  a = () => {
    console.trace('log message');
  },
  b = () => {
    a();
  },
  c = () => {
    b();
  };

c();
// ⏷ log message
//     a	@VMxx:xx
//     b	@VMxx:xx
//     c	@VMxx:xx
//     (anonymous)	@VMxx:xx\n

Mesure de performance / benchmark

Démarrage d’un chronomètre pour l’identifiant unique uiid spécifié.
console.time(uiid)
Affiche dans la console la valeur actuelle du chronomètre liée à l’identifiant unique uiid.
console.timeLog(uiid)
Met fin au chronomètre liée à l’identifiant unique uiid.
console.timeEnd(uiid)

let 
  uiidTimer1 = 'uiid_timer_1',
  uiidTimer2 = 'uiid_timer_2';

console.time(uiidTimer1);
alert('step #01: click to continue');
console.time(uiidTimer2);
console.timeLog(uiidTimer1);
console.timeLog(uiidTimer2);
alert('step #02: click to continue');
console.timeLog(uiidTimer1);
console.timeLog(uiidTimer2);
console.timeEnd(uiidTimer1);
console.timeEnd(uiidTimer2);

// uiid_timer_1: 1924ms
// uiid_timer_2: 1ms
// uiid_timer_1: 2963ms
// uiid_timer_2: 1040ms
// uiid_timer_1: 2964ms - timer ended
// uiid_timer_2: 1040ms - timer ended

Groupe de logs

Création d’un nouveau groupe dans la console Web.
console.group([uiid])
Création d’un nouveau groupe réduit dans la console Web.
console.groupCollapsed([uiid])

Fermeture d’un nouveau groupe dans la console Web.
console.groupEnd()

console.group('parentGroup');
console.log('msg #01');
console.groupCollapsed('childGroup');
console.log('msg #02');
console.groupEnd();
console.log('msg #03');
console.groupEnd();

Représentation d’objets

La méthode console.dir semble avoir co-évolué avec la méthode console.log au point qu’il est difficile de les différencier, elle vise(rait) à donner une représentation JSON de l’objet à disséquer.

Principales différences sous Chrome

console.log(document.body);
// ⏵<body class="home-page">...</body>

console.dir(document.body);
// ⏵body.home-page

La console n’affiche pas de représentation des objets non développés :

console.log({x: 1, y: [1, 2, 3]});
// ⏵{x: 1, y: [1, 2, 3]}

console.dir({x: 1, y: [1, 2, 3]});
// ⏵Object