Aller au-delà de console.log

Explorer la console du navigateur : exemples pratiques pour les développeurs Web

Pendant longtemps, mes principales méthodes de débogage JavaScript consistaient essentiellement en console.log() et console.error(). Une fois que j'ai appris à exploiter les méthodes des autres objets de la console du navigateur, mon jeu JavaScript a définitivement fait un pas de géant.

Vous trouverez ci-dessous 8 façons dont j'utilise l'objet fenêtre de console lorsque je travaille sur des projets et des scripts JavaScript et l'utilisation pratique de chacun.

---

1. console.log() - Journalisation générale

Intention : Afficher des informations générales pour le débogage ou le suivi du flux du programme.

Exemple pratique : Utilisez console.log pour inspecter les valeurs des variables :

const user = { name: 'Alice', age: 30 };
console.log('User details:', user);

Exemple de sortie :

---

2. console.error() - Mettre en surbrillance les erreurs

Intention : Afficher les messages d'erreur dans la console avec une trace de pile. console.error() a un formatage différent, ce qui lui permet de se démarquer généralement avec un fond rouge et une icône d'erreur.

Exemple pratique : Consigner les erreurs lorsque les appels d'API échouent :

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Failed to fetch data');
  })
  .catch(error => console.error('Fetch error:', error));

Exemple de sortie :

---

3. console.warn() - Avertir des problèmes potentiels

Intention : Mettez en évidence les problèmes ou les dépréciations non critiques. console.warn() a un formatage différent qui lui permet de se démarquer. Généralement un fond jaune avec une icône d'avertissement.

Exemple pratique : Avertir en cas de saisie utilisateur non valide :

const userInput = '';
if (!userInput) console.warn('User input is empty. Default value will be used.');

Exemple de sortie :

---

4. console.table() - Afficher les données sous forme de tableau

Intention : Visualisez des tableaux ou des objets sous forme de tableau pour plus de clarté. Utile pour visualiser un large éventail d'objets.

Exemple pratique : Inspecter les données de réponse de l'API :

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
console.table(data);

Exemple de sortie :

---

5. console.group() et console.groupEnd() - Organiser les journaux en groupes

Intention : Regroupez les journaux associés pour une meilleure lisibilité.

Exemple pratique : Réponses et métadonnées de l'API de débogage :

console.group('API Response');
console.log(`Status: ${response.status}`);
console.log(`Data:`, data);
console.groupEnd();

Exemple de sortie :

---

6. console.time() et console.timeEnd() – Mesurer les performances

Intention : Suivez le temps d'exécution d'un bloc de code. Bon pour les tests de performances et le temps de blocage.

Exemple pratique :Optimiser une fonction de tri :

const user = { name: 'Alice', age: 30 };
console.log('User details:', user);

Exemple de sortie :

---

7. console.assert() - Hypothèses de test

Intention : Enregistrez les messages uniquement lorsqu'une condition est fausse. Utile lorsque vous souhaitez afficher sous condition un message d’erreur. A généralement un fond rouge avec une icône d'avertissement et le texte « Échec de l'affirmation ».

Exemple pratique : Valider les autorisations des utilisateurs :

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Failed to fetch data');
  })
  .catch(error => console.error('Fetch error:', error));

Exemple de sortie :

---

8. console.trace() - Afficher la pile d'appels

Intention : Afficher la pile d'appels pour tracer les appels de fonction. Suivez les étapes menant à l'appel console.trace(), ce qui est utile lorsque les données sont suivies via plusieurs appels de fonction.

Exemple pratique : Débogage où une fonction a été invoquée :

const userInput = '';
if (!userInput) console.warn('User input is empty. Default value will be used.');

Exemple de sortie :

---

9. console.count() - Compter les occurrences du journal

Intention : Comptez combien de fois une ligne de code a été exécutée. Utile dans les cas où vous devez compter le nombre de fois qu'une fonction a été appelée ou qu'une boucle a bouclé.

Exemple pratique : Compter les boucles :

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
console.table(data);

Exemple de sortie :

---

10. console.clear() - Nettoyer la console

Intention : Effacer les journaux encombrés pendant les tests.

Utilisation pratique :

console.group('API Response');
console.log(`Status: ${response.status}`);
console.log(`Data:`, data);
console.groupEnd();

---

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!