Au-delà de console.log, épisode I : vive DevTools !

On travaille avec elle tous les jours, et pourtant on prend rarement le temps de la connaître vraiment ?
Dans cet article, nous passerons en revue une courte liste de fonctionnalités avancées de la console du navigateur, allant au-delà de la simple fonction log.
NB : histoire de vous éviter des allers-et-retours entre cette page et l’excellente documentation du MDN, j’utiliserai le typage des fonctions avec une notation de style Typescript.
<
h4>group, groupCollapsed, groupEnd
<
h4>
L’API de la console (non-standardisée, mais respectée par au moins Chrome)
console.group(name:string) permet de regrouper les logs suivants dans un groupe pliable/dépliable à souhait. Selon qu’on utilise console.groupCollapsed(name:string) ou juste group, le groupe sera plié/déplié respectivement. Pour clore le groupe, il faut utiliser console.groupEnd().

function groupLogDemo() {
	console.group('demo');
	console.log('i am in the group');
	console.log('me too');
	console.groupEnd();
}

console.group
groupCollapsed, lui, apparaît refermé par défaut.
Ceci permet donc d’avoir des logs structurés, bien comme il faut. À ce propos, pour aller plus loin, je vous conseille d’étudier les custom Formatters, une API de Chrome qui permet de faire des merveilles, qui sera probablement sujette à un article plus détaillé de ma part. C’est passé un peu sous les radars, mais quelques articles en parlent.

oooooh, que c'est sexy. source : https://www.bram.us/2016/04/25/chrome-devtools-custom-object-formatters/
oooooh, que c’est sexy. source
Pour l’instant, c’est une API non-standard, mais ne nous le cachons pas : les consoles de développement de Firefox, Edge, IE font pâle figure face au mastodonte de webkit.
whatelse
<
h4>table
<
h4>
À propos de formatage, quand on souhaite loguer un tableau d’objets qui ont plus ou moins la même forme (comprenez : les mêmes propriétés), il est souhaitable d’utiliser à cet effet la fonction console.table(array:any, columns?:string[]). Jugez par vous-même :

function tableDemo() {
    console.table([{a: 1, b: 2, c: 3}, {a: 'foo', b: false, c: undefined}]);
    console.table([[1, 2, 3], [2, 3, 4]]);
}

Question : c’est bien beau, mais n’y aurait-il pas des fonctionnalités plus pratiques, comme… Pouvoir écrire avec des lettres en feu dans la console ?
La réponse est un grand « oui ! », grâce au… (roulement de tambours)… formatage !
console.table

Ces quelques lignes de code…
function logFireDemo() {
     // notez le %c au début du premier argument
     console.log('%cUuuuuh yeah !', `text-shadow:0 0 20px rgb(254,252,201),
        10px -10px 30px rgb(254,236,133),
        -20px -20px 40px rgb(255,174,52),
        20px -40px 50px rgb(236,118,12),
        -20px -60px 60px rgb(205,70,6),
        0 -80px 70px rgb(151,55,22),
        10px -90px 80px rgb(69,27,14);font-size:90px;color:white`);
}

… Devraient combler vos désirs les plus inavouables :

console.log
console.log
<
h4>Rendre fous ses collègues
<
h4>
Si vous voulez encourager vos collègues à utiliser certaines des méthodes de console détaillées dans cet article au lieu de console.log, vous pourriez peut-être monkey-patcher la fonction de log pour écrire du texte invisible (ou autre poisson d’avril) et les rendre fous. #machiavel #nudge
Notez cependant qu’avoir un texte qui clignote n’est malheureusement pas possible, étant donné qu’il faut des animations pour ça… Même s’il semble que le feu blink reviendra un jour dans Chrome avec la propriété text-decoration

Divers trucs et astuces pour devTools de Chromium

$0 référence le dernier élément sélectionné dans le panneau des éléments. $1 est une référence à l’avant-dernier, et ainsi de suite. D’ailleurs, le dernier résultat d’une expression exécutée depuis la console est accessible avec $_, l’équivalent de ANS sur nos vieilles calculettes (ça ne me rajeunit pas ?).
Dans Devtools, vous pouvez inspecter une fonction ou un élément du DOM avec la commande inspect.

inspect($3);

Inspectera l’antépénultième élément dans notre historique des nœuds explorés dans le panneau devTools des éléments.
D’ailleurs, ce $… Ce serait tellement bien s’il pouvait permettre de faire des requêtes dans le DOM de la page… Et bien, Mesdames et Messieurs, devTools permet de le faire sans avoir JQuery dans notre objet global !
$(selector: string):HTMLElement vous retournera la même chose que document.querySelector(selector:string)
« Mais si on veut faire un document.querySelectorAll(…) ? », me demanderez-vous. Pas de panique, il y a un raccourci pour ça aussi : $$(selector:string):HTMLElement[]
But wait ! There’s more… Si vous voulez faire des requêtes XPath, vous pouvez utiliser $x(path:string)

// retourne la liste de tous les paragraphes qui contiennent
// au moins un lien
$x('//p[a]');

Votre console est toute cracra et vous voulez faire un ménage de printemps ?

clear() est là pour vous servir. Mais si vous préférez les raccourcis, vous pouvez faire CTRL+L (windows, linux, macOS), c’est encore plus rapide.
La console peut aussi vous faciliter la vie pour mesurer le temps d’exécution de vos fonctions avec console.time(label?:string)

function timeDemo() {
    console.time('testTime');
    setTimeout(() =&amp;amp;gt; {
      console.timeEnd('testTime');
    }, 0);
}

console.time
Ce temps n’est pas précis à la micro-seconde, mais il faudra vous en contenter avant mon prochain billet sur les fantastiques possibilités offertes par devTools. À moins que la curiosité ne vous pique et que vous cherchiez de vous même des infos sur window.performance.now et la User Timing API
à très bientôt pour de nouvelles aventures dans le monde merveilleux de devTools™, sur le blog de JS-Republic, bien sûr 😉
shadoks
 
 

 
 
 
 
Astuce bonus caché : console.profile(name: string) / console.profileEnd(name: string) permet d’enregistrer le flame chart de l’exécution d’une fonction, consultable après coup dans devTools – Firefox n’offre pas cette fonctionnalité.
Julien, JS-Republicain @JSRepublic
[actionbox color=”default” title=”” description=”JS-REPUBLIC est une société de services spécialisée dans le développement JavaScript. Nous sommes centre de formation agréé. Retrouvez toutes nos formations techniques sur notre site partenaire dédié au Training” btn_label=”Nos formations” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external=”1″]