L'inspecteur et la console des navigateurs : retrouver une erreur

1. Objectifs

   • Ouvrir les outils de développement (DevTools) de Chrome, Edge et Firefox.
   • Utiliser l'inspecteur pour examiner et modifier le HTML et le CSS en direct.
   • Utiliser la console pour afficher des messages et tester du code.
   • Lire un message d'erreur et retrouver la ligne fautive.

2. Ouvrir les outils de développement

Action	Chrome / Edge	Firefox
Ouvrir les DevTools	F12 ou Ctrl + Maj + I	F12 ou Ctrl + Maj + I
Ouvrir directement la console	Ctrl + Maj + J	Ctrl + Maj + K
Inspecter un élément	Clic droit → Inspecter ou Ctrl + Maj + C	Clic droit → Examiner l'élément ou Ctrl + Maj + C

Sur macOS : Cmd + Option + I (DevTools), Cmd + Option + J (console Chrome).

• Les principaux onglets : Éléments (Inspecteur dans Firefox), Console, Sources (Débogueur dans Firefox), Réseau, Application (Stockage dans Firefox).
• Edge est basé sur le même moteur que Chrome : ses DevTools sont presque identiques.

const stagiaires = [
  { nom: "Sami", note: 14 },
  { nom: "Rim", note: 17 }
];

console.log("Bienvenue sur la page des notes"); // message simple
console.info("Chargement terminé");              // information
console.warn("La note 22 dépasse 20");           // avertissement (jaune)
console.error("Impossible de calculer");         // erreur (rouge)
console.table(stagiaires);                       // affichage en tableau
console.log("Stagiaires :", stagiaires);         // plusieurs valeurs

console.group("Détails du calcul");              // regrouper des messages
console.log("Total : 31");
console.log("Moyenne : 15.5");
console.groupEnd();

console.time("tri");                             // mesurer une durée
stagiaires.sort((a, b) => a.note - b.note);
console.timeEnd("tri");                          // tri: 0.05 ms

console.count("clic");                           // compter les passages
console.assert(stagiaires.length === 3, "Il devrait y avoir 3 stagiaires");

• console.assert(condition, message) n'affiche le message (en erreur) que si la condition est fausse.
• Astuce : console.log({ moyenne }) affiche à la fois le nom et la valeur de la variable.
• Les filtres en haut de la console permettent de n'afficher que les erreurs, les avertissements, etc. L'option Conserver le journal (Preserve log) garde les messages après un rechargement.

• Toutes les erreurs ne s'affichent pas : un bug de logique (calcul faux, condition inversée) ne provoque aucun message. Pour ceux-là, on utilise console.log ou les points d'arrêt (leçon suivante).
• Pensez aussi à l'onglet Réseau: un fichier .js introuvable apparaît en rouge avec le code 404.

Activité 1 : découvrir les DevTools

• Ouvrez un site d'actualités. Avec l'inspecteur, changez le texte du titre principal et la couleur de fond d'un bloc. Rechargez : que se passe-t-il ?
• Sélectionnez un élément, puis tapez $0 dans la console. Que s'affiche-t-il ?

Activité 2 : toutes les méthodes de console

• Créez un fichier console.js qui utilise log, warn, error, table, group, time, count et assert avec un tableau de 5 produits (nom, prix, stock).
• Utilisez les filtres de la console pour n'afficher que les avertissements.

Activité 3 : identifier le type d'erreur

• Tapez chaque ligne dans la console, notez le type et le message d'erreur, puis corrigez :

console.log("Bonjour"));
prenom = nom + 1;
const TVA = 0.19; TVA = 0.2;
document.querySelector("#inexistant").textContent = "test";
let total = 10; total();
new Array(-1);

Activité 4 : la console comme calculatrice

• Dans la console, calculez 0.1 + 0.2, "5" + 2, "5" - 2, typeof null. Notez les résultats surprenants : nous les expliquerons dans le chapitre 03. Déposez vos fichiers dans le dépôt GitHub js-console.