La console Chrome est un outil essentiel pour le débogage des scripts et la conception front-end. Pour l'ouvrir, appuyez sur F12 dans le navigateur. La console affiche des messages et permet d'interagir avec le code JavaScript en temps réel.

Pour vider la console, cliquez sur l'icône dédiée en haut à gauche ou exécutez la commande console.clear(). Par exemple, pour itérer sur un tableau sans bloquer le thread comme le ferait alert, utilisez console.log :

const donnees = [10, 20, 30, 40, 50];
donnees.forEach(valeur => console.log(valeur));

L'objet console propose plusieurs méthodes pour les messages de débogage :

• console.log : pour les informations générales.
• console.info : pour les messages informatifs.
• console.error : pour les erreurs.
• console.warn : pour les avertissements.
• console.debug : pour le débogage détaillé.

Ces méthodes acceptent des placeholders à la printf : %s pour les chaînes, %d ou %i pour les entiers, %f pour les flottants, et %o pour les objets.

console.log("Date : %d-%d-%d", 2023, 10, 5);
console.log("Taux : %f%%", 15.5);
const utilisateur = { prenom: "Jean", age: 25 };
console.log("%o", utilisateur);

console.dirxml affiche le code HTML/XML d'un nœud DOM. Par exemple :

window.addEventListener('load', () => {
    const element = document.getElementById('tableau');
    console.dirxml(element);
});

Utilisez console.group et console.groupEnd pour regrouper les messages :

console.group("Groupe de test");
console.log("Message 1");
console.log("Message 2");
console.groupEnd();

console.assert vérifie une condition et affiche un message si elle est fausse :

let score = 42;
console.assert(score > 50, "Le score doit dépasser 50");

console.count compteur les appels à une fonction :

function traitement() {
    console.count("traitement");
}
traitement(); traitement();

console.dir affiche un objet sous forme d'arborescence, utile pour inspecter les propriétés :

const config = { debug: true, version: "2.0" };
console.dir(config);

Pour mesurer les performances, utilisez console.time et console.timeEnd :

console.time("boucle");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("boucle");

console.profile et console.profileEnd permettent de profiler l'utilisation CPU :

console.profile("Profil chargement");
// Code à analyser
console.profileEnd();

console.trace affiche la pile d'appels pour le débogage :

function alpha() { beta(); }
function beta() { console.trace(); }
alpha();

Raccourcis et commandes utiles :

• Touches fléchées haut/bas pour naviguer dans l'historique des commandes.
• $_ retourne le résultat de la dernière expression exécutée.
• $0 à $4 référencent les cinq derniers éléments DOM inspectés via l'onglet Éléments.
• $ et $$ agissnet comme des sélecteurs CSS (respectivement querySelector et querySelectorAll).
• copy() copie des données dans le presse-papiers.
• keys() et values() extraient les clés ou valeurs d'un objet.
• monitor() et unmonitor() surveillent les appels à une fonction spécifiée.

Ces fonctionnalités optimisent le flux de travail de débogage dans Chrome. Consultez la documentation officielle de Chrome DevTools pour une référence complète.