JavaScript console.log() trucs et astuces

-

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
);
Alfredhttps://www.alfreddagenais.com
Je suis un développeur Web Full Stack sénior. Chaque jour est pour moi une journée de plus pour découvrir de nouvelles idées. Le développement web et l'informatique sont omniprésents dans mon quotidien. Pour que la créativité soit à son maximum, il ne faut pas avoir peur d’expérimenter et nous avons tous que le Web est infiniment grand pour expérimenter nos idées.

Buy me a coffee Paypal Patreon Ko-Fi

Share this article

Recent posts

Popular categories

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Recent comments