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
);
Alfred
Alfredhttps://www.alfreddagenais.com
Salut ! Moi, c'est Alfred, développeur dans l’âme et explorateur de l'infini Web. Je suis constamment à la recherche de nouvelles idées et je pense que le développement web et l'informatique ont le pouvoir de transformer le monde. Je suis un grand admirateur de l'expérimentation, parce que c'est souvent de là que naissent les idées les plus créatives. Je suis convaincu que l'humour est un ingrédient clé de la vie, alors j'essaie toujours de glisser une blague ou deux dans mon code (pas toujours facile à comprendre, mais c'est le risque à prendre). En dehors de la programmation, j'aime passer du temps avec ma famille et mes amis, découvrir de nouveaux endroits et cuisiner des plats délicieux (du moins, j'essaie). Si vous voulez discuter de développement web, d'innovation, ou tout simplement échanger des blagues, n'hésitez pas à me contacter. Je suis toujours partant pour une bonne conversation !

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