Tout le monde utilise la console JavaScript pour se connecter ou débogguer de temps en temps. Mais l’objet console ne se limite pas à la console.log()
.
Noms de propriété calculés
Les noms de propriétés calculés par l’ES6 sont particulièrement utiles, car ils peuvent vous aider à identifier les variables enregistrées en ajoutant une paire d’accolades autour d’elles.
const x = 1, y = 2, z = 3; console.log({x, y, z}); // {x: 1, y: 2, z: 3}
console.trace()
console.trace()
fonctionne exactement de la même manière que console.log()
, mais il produit également la trace de la pile entière, de sorte que vous savez exactement ce qui se passe.
const outer = () => { const inner = () => console.trace('Hello'); inner(); }; outer(); /* Hello inner @ VM207:3 outer @ VM207:5 (anonymous) @ VM228:1 */
console.group()
console.group()
vous permet de regrouper les logs dans des structures repliables et est particulièrement utile lorsque vous avez plusieurs logs.
console.group('Outer'); // Create a group labelled 'Outer' console.log('Hello'); // Log inside 'Outer' console.groupCollapsed('Inner'); // Create a group labelled 'Inner', collapsed console.log('Hellooooo'); // Log inside 'Inner' console.groupEnd(); // End of current group, 'Inner' console.groupEnd(); // End of current group, 'Outer' console.log('Hi'); // Log outside of any groups
Logging levels
Il existe quelques autres niveaux de journalisation en dehors de console.log()
, tels que console.debug()
, console.info()
, console.warn()
et console.error()
.
console.debug('Debug message'); console.info('Useful information'); console.warn('This is a warning'); console.error('Something went wrong!');
console.assert()
console.assert()
fournit un moyen pratique de ne consigner quelque chose comme erreur que lorsqu’une assertion échoue (c’est-à-dire lorsque le premier argument est faux), sinon il faut ignorer complètement le journal.
const value = 10; console.assert(value === 10, 'Value is not 10!'); // Nothing is logged console.assert(value === 20, 'Value is not 20!'); // Logs "Value is not 20!"
console.count()
Vous pouvez utiliser console.count()
pour compter le nombre de fois qu’un morceau de code s’est exécuté.
Array.from({ length: 4 }).forEach( () => console.count('items') // Call the counter labelled 'items' ); /* items: 1 items: 2 items: 3 items: 4 */ console.countReset('items'); // Reset the counter labelled 'items'
console.time()
console.time()
vous donne un moyen rapide de vérifier les performances de votre code, mais ne doit pas être utilisé pour une véritable analyse comparative en raison de sa faible précision.
console.time('slow comp'); // Start the 'slow comp' timer console.timeLog('slow comp'); // Log the value of the 'slow comp' timer console.timeEnd('slow comp'); // Stop and log the 'slow comp' timer
Bonus: CSS
Enfin et surtout, vous pouvez utiliser l’expression de substitution de chaîne %c
dans console.log()
pour appliquer le CSS à des parties d’un journal.
console.log( 'CSS can make %cyour console logs%c %cawesome%c!', // String to format // Each string is the CSS to apply for each consecutive %c 'color: #fff; background: #1e90ff; padding: 4px', // Apply styles '', // Clear any styles 'color: #f00; font-weight: bold', // Apply styles '' // Clear any styles );