Comprendre la console JavaScript : Au-delà de console.log

Les fonctions de base : différents types de messages

Ces fonctions vous permettent d'afficher des informations avec différents niveaux d'importance dans la console.

console.log() : Le classique pour tout afficher

La fonction que vous connaissez déjà. Elle accepte plusieurs arguments et formate automatiquement les objets complexes.

const user = { id: 1, name: "Sophie", email: "sophie@example.com" };
const status = "connected";

// Affichage multiple avec contexte
console.log("Utilisateur :", user, "Statut :", status);

// Formatage automatique des objets
console.log({ user, timestamp: Date.now() });

console.warn() : Signaler un problème non-critique

Pour les avertissements qui ne cassent pas votre application mais méritent attention. Les navigateurs affichent ces messages avec une icône d'avertissement.

function saveRecipe(recipe) {
    if (!recipe.title) {
        console.warn("Attention : recette sans titre.");
    }
    if (recipe.ingredients.length === 0) {
        console.warn("Cette recette n'a aucun ingrédient");
    }
    // On continue quand même à sauvegarder
    localStorage.setItem('recipe', JSON.stringify(recipe));
}

console.error() : Signaler les erreurs importantes

Utilisez cette méthode pour les problèmes graves qui bloquent votre code. Elle affiche le message en rouge et vous montre la pile d'appels (stack trace) pour vous aider à retrouver l'erreur rapidement.

function loadUserData(userId) {
    if (!userId) {
        console.error("ID utilisateur manquant, impossible de charger les données");
        return null;
    }
    
    try {
        const data = JSON.parse(localStorage.getItem(`user_${userId}`));
        return data;
    } catch (error) {
        console.error("Données utilisateur corrompues :", error.message);
        return null;
    }
}

console.info() : Pour les informations générales

Similaire à console.log(), mais certains navigateurs lui donnent un style visuel différent pour les informations contextuelles.

function loadApp() {
    const savedRecipes = localStorage.getItem('recipes');
    if (savedRecipes) {
        const count = JSON.parse(savedRecipes).length;
        console.info(`${count} recettes chargées depuis la sauvegarde locale`);
    } else {
        console.info("Première visite détectée, chargement des recettes par défaut");
    }
}

console.debug() : Pour le débogage détaillé

Ces messages sont destinés au débogage très fin. Ils sont souvent masqués par défaut et ne s'affichent qu'en activant le niveau "Verbose" dans la console.

function searchRecipes(query) {
    console.debug("Recherche lancée avec le terme :", query);
    
    const results = recipes.filter(recipe => 
        recipe.title.toLowerCase().includes(query.toLowerCase())
    );
    
    console.debug(`${results.length} résultats trouvés sur ${recipes.length} recettes`);
    return results;
}

Organiser vos messages : pour une console plus claire

Quand vous avez beaucoup d'informations à afficher, ces fonctions vous aident à structurer vos messages de debug.

console.table() : Afficher des données sous forme de tableau

Indispensable pour visualiser des tableaux d'objets ou des données structurées. Plus lisible que console.log() et permet le tri dans la plupart des navigateurs.

// Afficher une liste de recettes
const recipes = [
    { id: 1, title: "Pâtes à la tomate", difficulty: "facile", time: "15 min" },
    { id: 2, title: "Risotto aux champignons", difficulty: "moyen", time: "35 min" },
    { id: 3, title: "Soufflé au chocolat", difficulty: "difficile", time: "45 min" }
];
console.table(recipes);

// Ou pour debug l'état global de votre app
const appState = {
    totalRecipes: recipes.length,
    currentUser: "Sophie",
    lastAction: "search",
    isOnline: navigator.onLine
};
console.table(appState);

console.group() et console.groupEnd() : Regrouper les messages

Créez des groupes de messages indentés pour organiser vos logs par fonctionnalité ou par étape d'un processus.

function importRecipe(recipeData) {
    console.group("📥 Import de recette");
    console.log("Données reçues :", recipeData.title);
    console.log("Validation du format...");
    
    if (recipeData.ingredients && recipeData.instructions) {
        console.log("✅ Format valide");
        console.log("Ajout à la collection locale");
    } else {
        console.warn("⚠️ Données incomplètes détectées");
    }
    
    console.groupEnd();
}

console.groupCollapsed() : Groupes repliés par défaut

Identique à console.group(), mais le groupe est replié par défaut. L'utilisateur doit cliquer dessus pour le voir.

console.groupCollapsed("🔧 Détails techniques (cliquer pour voir)");
console.log("Version de l'app :", "2.1.4");
console.log("Navigateur :", navigator.userAgent);
console.log("Résolution :", `${screen.width}x${screen.height}`);
console.groupEnd();

console.clear() : Vider la console

Efface tous les messages précédents. Pratique pour faire le ménage avant une série de tests par exemple.

function runTests() {
    console.clear(); // On fait le ménage
    console.log("🧪 Démarrage des tests...");
    // ... vos tests
}

Mesurer le temps : analyser les performances

Ces fonctions vous aident à identifier les parties lentes de votre code.

console.time() et console.timeEnd() : Chronométrer votre code

Mesurez précisément le temps d'exécution entre deux points de votre code. Chaque timer est identifié par un nom unique.

Ca peut permettre de mesurer le temps de chargement d'une fonction :

console.time("loadRecipes");
const recipes = await fetch('/api/recipes').then(r => r.json());
console.timeEnd("loadRecipes"); // Ex: loadRecipes: 234.567ms

Ou de comparer deux approches :

console.time("filterMethod1");
const easy = recipes.filter(r => r.difficulty === "facile");
console.timeEnd("filterMethod1");

console.time("filterMethod2");  
const quickAndEasy = recipes.filter(r => r.difficulty === "facile" && r.time < 30);
console.timeEnd("filterMethod2");

Outils avancés : vérifier et tracer

Pour des situations de debug plus complexes où vous devez valider des conditions ou comprendre le chemin d'exécution.

console.assert() : Vérifier vos hypothèses

Affiche un message d'erreur seulement si la condition est fausse. Parfait pour valider que vos données respectent les règles attendues.

function calculateServings(recipe, desiredServings) {
    console.assert(typeof desiredServings === 'number', 
        'Le nombre de portions doit être un nombre :', desiredServings);
    console.assert(desiredServings > 0, 
        'Impossible de faire 0 portion ou moins :', desiredServings);
    
    // Si tout va bien, on calcule
    const ratio = desiredServings / recipe.originalServings;
    return recipe.ingredients.map(ing => ({
        ...ing,
        quantity: ing.quantity * ratio
    }));
}

console.trace() : Comprendre le parcours de votre code

Imaginez que votre fonction soit appelée depuis plusieurs endroits différents dans votre code, et vous voulez savoir lequel exactement. console.trace() affiche la liste complète des fonctions qui se sont appelées les unes après les autres pour arriver jusqu'ici, comme un historique de navigation dans votre code.

Exemple concret : vous avez une fonction qui plante parfois, mais pas toujours. Le problème c'est qu'elle est utilisée partout dans votre app :

function deleteRecipe(recipeId) {
    console.trace("🔍 Suppression demandée, d'où ça vient ?");
    
    const index = recipes.findIndex(r => r.id === recipeId);
    if (index > -1) {
        recipes.splice(index, 1);
        updateUI();
    }
}

Cette fonction peut être appelée depuis plusieurs endroits :

// Appel depuis un bouton
function onDeleteButtonClick() {
    deleteRecipe(currentRecipeId);
}

// Appel depuis un nettoyage automatique
function cleanupOldRecipes() {
    oldRecipes.forEach(recipe => deleteRecipe(recipe.id));
}

// Appel depuis un raccourci clavier
function handleKeyboardShortcut(event) {
    if (event.key === 'Delete') {
        deleteRecipe(selectedRecipeId);
    }
}

Si, par exemple, la fonction deleteRecipe est déclenchée suite au clic sur un bouton (donc via onDeleteButtonClick), alors console.trace() vous montrera une trace similaire à ceci :

🔍 Suppression demandée, d'où ça vient ?
    deleteRecipe          @app.js:45
    onDeleteButtonClick   @app.js:23
    HTMLButtonElement     @(anonymous)
    EventTarget.dispatchEvent @(native)

Dans cette trace, la présence de onDeleteButtonClick vous indique clairement que la suppression est venue d'un clic sur le bouton, et non du nettoyage automatique ou d'un raccourci clavier. C'est très utile pour cibler les bugs qui n'apparaissent que dans certaines situations !

console.count() et console.countReset() : Compter les événements

Comptez automatiquement le nombre de fois qu'une ligne de code est exécutée. Pratique pour vérifier la fréquence d'un événement.

function addToFavorites(recipeId) {
    console.count("ajout_favoris");
    favorites.push(recipeId);
    updateFavoritesDisplay();
}

function removeFromFavorites(recipeId) {
    console.count("suppression_favoris");
    const index = favorites.indexOf(recipeId);
    if (index > -1) favorites.splice(index, 1);
    updateFavoritesDisplay();
}

Dans la console, vous verrez :

// ajout_favoris: 1
// ajout_favoris: 2
// suppression_favoris: 1
// ajout_favoris: 3

Pour remettre à zéro :

console.countReset("ajout_favoris");

console.dir() : Explorer les objets en détail

Affiche une vue interactive et détaillée des propriétés d'un objet. Plus complet que console.log() pour explorer des structures complexes.

const complexRecipe = {
    title: "Coq au vin",
    ingredients: ["poulet", "vin rouge", "champignons"],
    instructions: ["Faire revenir...", "Ajouter le vin..."],
    metadata: {
        difficulty: "moyen",
        cookingTime: 45,
        author: "Chef Michel",
        tags: ["traditionnel", "français"],
        nutrition: { calories: 450, protein: "35g" }
    }
};

console.log(complexRecipe);  // Affichage standard
console.dir(complexRecipe);  // Vue détaillée interactive