API JavaScript Day Learning : API de console

JavaScript possède une tonne d'API intégrées qui rendent la programmation amusante et intéressante. Mais soyons réalistes, combien d’entre eux utilisez-vous réellement à leur plein potentiel ? Au cours des 30 jours prochains, nous nous plongerons dans ces API, en décrivant ce qu'elles sont et les choses intéressantes que vous avez peut-être manquées. Des bases aux choses plus avancées, vous découvrirez de nouvelles astuces en cours de route.

Vous vous sentez dépassé par les API JavaScript ? Ou peut-être êtes-vous simplement ici pour apprendre quelque chose de nouveau ? Quoi qu’il en soit, cette série est faite pour vous.

Aujourd'hui, nous commençons avec une API qui vous aide discrètement à déboguer depuis le début : l'API de la console. Bien sûr, vous avez déjà utilisé console.log() auparavant, mais il peut faire bien plus. Découvrons quelques-unes de ses astuces cachées !

Qu'est-ce que l'API de la console ?

L'API Console est un ensemble de méthodes très utiles qui facilitent le débogage, la journalisation et la visualisation de vos données.

Mais avouons-le : vous êtes probablement bloqué sur l'utilisation de console.log() pour tout. Il est temps de rompre avec cette habitude, car cette API peut faire bien plus.

Voici quelques choses intéressantes que vous avez manquées :

Des choses intéressantes que vous pouvez faire avec l'API de la console

1. Afficher les données dans des tableaux

Avez-vous déjà eu l'impression que vos journaux n'étaient qu'un fouillis de texte auquel vous n'arriviez pas à comprendre ? console.table() vous soutient.

Voici à quoi ressemblent probablement vos journaux en ce moment :

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

Résultat :

Maintenant, nettoyons ça :

console.table(fruits);

Résultat :

Beaucoup mieux, non ? C'est plus facile à lire, et désormais vos données ont un sens en un coup d'œil.

2. Arrêtez d'écrire des instructions If redondantes avec console.assert()

Levez la main si vous avez écrit une douzaine de déclarations if juste pour enregistrer des erreurs. Eh bien, arrête de faire ça ! console.assert() est là pour sauver la situation.

Au lieu de ça :

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

Essayez ceci :

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

Si la condition est fausse, le message sera enregistré. Si simple, non ?

3. Mesurer les performances du code

Vous êtes curieux de savoir combien de temps prend un bloc de code pour s'exécuter ? Dites bonjour à console.time() et console.timeEnd().

Voici comment mesurer les performances :

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

Résultat :

Vous pouvez désormais comprendre ce qui ralentit votre application !

4. Comptez combien de fois un bloc s'exécute

Vous êtes-vous déjà demandé à quelle fréquence un morceau de code est exécuté ? Garder une trace manuellement peut être délicat, d'autant plus que votre code devient plus complexe. C'est là que console.count() s'avère utile.

Imaginez ce scénario :

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

À première vue, il peut être facile de déterminer combien de fois le message d'accueil est exécuté pour les noms commençant par « A ». Mais à mesure que votre logique se développe, vous risquez de perdre le fil.

Maintenant, simplifions les choses avec console.count() :

console.table(fruits);

Voici ce qui se passe :

• Chaque fois qu'un nom commençant par "A" est salué, console.count() incrémente le décompte et le étiquette "Salut les utilisateurs commençant par A".
• Après la réinitialisation avec console.countReset(), le décompte recommence.

Plus besoin de deviner ou d'ajouter des instructions d'impression partout dans votre code. Une seule ligne et le tour est joué !

5. Stylez vos journaux avec CSS

Parfois, vous avez besoin que vos journaux apparaissent. Utilisez %c pour styliser vos journaux avec CSS et les faire ressortir.

Exemple :

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

Résultat :

Mettez en surbrillance les erreurs, les avertissements ou amusez-vous simplement avec vos journaux.

6. Regrouper les journaux associés

Vous en avez assez de faire défiler des journaux sans fin ? Utilisez console.group() pour regrouper les journaux associés.

Voici un exemple :

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

Sortie :

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

Vous pouvez également utiliser console.groupCollapsed() pour conserver les groupes réduits par défaut.

Conclusion

L'API de la console est beaucoup plus puissante que vous ne le pensez. Des tableaux à la mesure des performances, en passant par les compteurs, le style et le regroupement, il existe un outil pour presque tous les scénarios de débogage.

Ce n'est que le premier jour de notre série 30 jours d'API JavaScript. Si vous avez trouvé cela utile, ajoutez cet article à vos favoris pour plus tard et assurez-vous de rester dans les parages : il y a tellement plus à apprendre !

Et si vous avez des questions, n'hésitez pas à m'envoyer un message sur Twitter à @sprucekhalifa. N'oubliez pas de me suivre pour plus d'informations et de mises à jour. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!