Corriger des bugs avec Codex

Introduction

Aucun développeur n'échappe aux bugs. L'ingénieur le plus brillant de la Silicon Valley et le débutant qui code sa première page HTML ont un point commun : ils passent la majeure partie de leur journée à réparer des choses qui ne fonctionnent pas.

La différence ne réside pas dans le nombre de bugs rencontrés, mais dans la méthodologie utilisée pour les traquer. Un débutant panique face à une page blanche. Un développeur expérimenté inspecte, analyse, et isole le problème.

Codex a été entraîné sur des milliards de lignes de code défectueuses. Il a "vu" toutes les erreurs possibles. Il est un assistant de débogage absolument redoutable, à condition que vous sachiez comment lui présenter la scène de crime.

Qu'est-ce qu'un bug ?

En informatique, un bug est simplement un comportement inattendu. La machine n'est jamais "cassée" ; elle exécute fidèlement une instruction erronée que vous (ou quelqu'un d'autre) avez écrite.

Voici quelques exemples classiques :

Un bouton de menu sur lequel on clique, mais qui ne s'ouvre pas.
Une image de 4000 pixels qui écrase tout le texte sur mobile.
Une page totalement blanche avec une longue ligne de texte rouge dans la console.
Un formulaire qui, lorsqu'on le valide, efface tout sans envoyer de mail.

Les principaux types de bugs

Il est crucial de comprendre dans quelle catégorie se situe votre problème, car Codex n'analysera pas les mêmes fichiers.

Type d'erreur	Exemple concret	Comment Codex peut aider
Erreur HTML	Une balise </div> oubliée casse toute la page.	Audit syntaxique instantané du fichier entier.
Erreur CSS	Un texte est blanc sur fond blanc.	Recherche des conflits de classes et spécificité.
Erreur JavaScript	TypeError: Cannot read properties of null.	Trace l'origine de la variable vide (null).
Erreur React	Too many re-renders (boucle infinie).	Analyse des hooks (useEffect) mal configurés.
Erreur de logique	Le panier calcule 2+2 = 22 au lieu de 4.	Convertit les chaînes de texte en nombres (parseInt).
Erreur Responsive	Le tableau sort de l'écran sur iPhone.	Ajoute des conteneurs avec overflow-x: auto.
Erreur de Config	Le build refuse de se lancer (npm ERR).	Analyse le package.json et les dépendances.

Comment expliquer un bug à Codex

Un médecin ne peut pas vous soigner si vous lui dites simplement "J'ai mal". Il a besoin de symptômes précis. Avec Codex, c'est exactement la même chose.

Prompt vague (Inutile)	Prompt ciblé (Efficace)
Ça ne marche plus.	Depuis l'ajout de la bannière, le bouton Accueil ne réagit plus au clic.
L'image est cassée.	L'image hero.jpg affiche une icône brisée sur Chrome, mais le chemin semble bon.
Mon site est moche sur téléphone.	Sur un écran de 375px, le titre H1 chevauche le paragraphe du dessous.
J'ai une erreur.	La console m'affiche "ReferenceError: initData is not defined" à la ligne 42 de app.js.
Corrige ce code.	Cette fonction doit renvoyer true, mais elle renvoie toujours false. Trouve pourquoi.
Le formulaire bugue.	Quand je clique sur Envoyer, la page se recharge au lieu d'appeler l'API.
Il manque un truc.	L'import de ma police Google Fonts dans index.html n'a aucun effet sur la page.
C'est lent.	La boucle for() met 3 secondes à s'exécuter. Peux-tu l'optimiser ?
La couleur n'est pas la bonne.	J'ai mis .btn { color: red; } mais le bouton reste bleu. Y a-t-il un conflit CSS ?
Où est l'erreur ?	J'ai un SyntaxError inattendu sur mon fichier JSON. Peux-tu vérifier les virgules ?
Le menu disparait.	Mon menu "position: sticky" disparaît quand je scrolle vers le bas. Pourquoi ?
React plante.	J'ai l'erreur "Hooks can only be called inside the body of a function component".
Rien ne s'affiche.	La requête fetch() reçoit bien les données (vu dans l'onglet Network), mais l'interface reste vide.
Je ne comprends pas.	La console dit "CORS policy blocked access". Comment autoriser mon domaine ?
C'est cassé.	J'ai fait un git pull et maintenant npm start crashe. Dois-je vider le cache ?

Les informations que Codex doit connaître

Avant d'envoyer un prompt de débogage, assurez-vous d'avoir coché ces cases mentales :

[ ] Le composant visé : De quoi parle-t-on ? (Le header, le bouton Valider, la section Contact).
[ ] Le résultat attendu : Que devait-il se passer dans un monde parfait ? ("La modale devait s'ouvrir").
[ ] Le résultat obtenu : Que se passe-t-il dans le monde réel ? ("Rien ne se passe et la page remonte tout en haut").
[ ] Les indices de la console : Avez-vous ouvert l'inspecteur du navigateur ? Y a-t-il du texte rouge ?
[ ] La dernière action : "Ça marchait avant que je modifie la police d'écriture". C'est souvent l'indice clé.

Comprendre un message d'erreur

Les navigateurs ne parlent pas français, ils parlent JavaScript. Apprenez à traduire leurs plaintes avec Codex.

Erreurs fréquentes

SyntaxError: Unexpected token '{'
Signification : Vous avez oublié de fermer une parenthèse, ou ajouté une accolade en trop.
Prompt : "J'ai cette SyntaxError à la ligne 45. Peux-tu analyser mon fichier et trouver la faute de frappe ?"

Erreurs fréquentes

ReferenceError: X is not defined
Signification : Vous demandez à la machine d'utiliser la variable X, mais elle n'existe pas.
Prompt : "Le navigateur me dit que X n'est pas défini. Ai-je oublié de déclarer cette variable ou ai-je fait une faute d'orthographe ?"

Erreurs fréquentes

TypeError: Cannot read properties of undefined (reading 'length')
Signification : Vous essayez de compter les éléments d'une liste qui est vide ou qui n'existe pas encore.
Prompt : "J'ai cette TypeError sur ma liste d'articles. Comment vérifier que la liste est bien chargée avant d'utiliser '.length' ?"

Demander une analyse AVANT la correction

C'est la règle de survie la plus importante du débogage par intelligence artificielle. Ne laissez jamais la machine corriger sans comprendre pourquoi elle le fait.

Voici la séquence parfaite en 3 étapes :

L'audit passif :
"J'ai un bug sur le clic du bouton principal. Analyse le fichier, mais n'écris aucune ligne de code pour le moment. Explique-moi juste la racine du problème."
Les options :
"Je comprends. Quelles sont mes options pour corriger cela ? Propose une méthode rapide, et une méthode plus propre."
L'exécution :
"La méthode propre me convient. Applique-la sur le fichier."

Pourquoi faire cela ? Parce que si vous demandez directement "Corrige ça", Codex peut décider de réécrire l'intégralité du fichier d'une manière différente, cassant potentiellement le reste de votre application. Gardez le contrôle.

Déboguer étape par étape

Un bug se cache souvent derrière un autre bug. C'est l'effet poupée russe.

Si vous avez un problème d'affichage de données venant d'une base de données, n'accusez pas immédiatement le HTML. Procédez par logique d'entonnoir :

Étape 1 : "Les données arrivent-elles bien du serveur ?" (Test de l'API).
Étape 2 : "Les données sont-elles bien stockées dans ma variable locale ?" (Test du JavaScript).
Étape 3 : "La variable locale est-elle bien reliée à l'interface visuelle ?" (Test du HTML).

Demandez à Codex de vous accompagner sur cette enquête, étape par étape : "Comment vérifier si l'étape 1 fonctionne ?"

Vérifier que le bug est réellement corrigé

Vous pensez avoir gagné parce que le bouton remarche ? Vérifiez cette checklist pour éviter les fausses joies :

[ ] Disparition du symptôme : Le bug principal est-il bien parti ?
[ ] Silence de la console : L'erreur rouge a-t-elle disparu de l'inspecteur ?
[ ] Tests des limites : Que se passe-t-il si je clique 10 fois très vite sur le bouton corrigé ?
[ ] L'effet collatéral : Le fait de corriger la largeur de cette image n'a-t-il pas détruit le reste de la galerie ?

Les erreurs les plus fréquentes en débogage

Symptôme : Tourner en rond pendant une heure avec Codex.
Cause : Vous lui dites "Ça ne marche toujours pas" sans lui donner les nouvelles erreurs de la console.
Bonne pratique : Feedbez-le avec des faits (les nouveaux logs d'erreur).
Symptôme : Le bug est corrigé, mais le code est devenu un monstre incompréhensible.
Cause : Codex a empilé des "rustines" (des `if` dans des `if`) pour contourner le problème.
Bonne pratique : Demandez : "Peut-on corriger ça de manière plus élégante ou en refactorisant la fonction ?"
Symptôme : Le design est corrigé sur ordinateur, mais cassé sur mobile.
Cause : L'IA a utilisé des tailles fixes (pixels) au lieu de tailles relatives (pourcentages).
Bonne pratique : Précisez toujours "Assure-toi que cette correction CSS reste 100% responsive."
Symptôme : Codex invente un bug qui n'existe pas.
Cause : Vous lui avez mal expliqué la situation, il tente donc de réparer un fichier sain.
Bonne pratique : Si l'analyse de Codex vous semble lunaire, dites-lui : "Je ne crois pas que ce soit ça, le problème semble plutôt venir de [votre hypothèse]."

Atelier pratique

Exercice 1 : Le bouton fantôme
Contexte : Le clic sur 'Acheter' ne fait rien. Aucune erreur.
Prompt : "Le bouton 'Acheter' de l'ID `#buy` ne réagit pas. Le JS est censé faire un `console.log('clic')`. Pourquoi le clic n'est-il pas intercepté ?"

Exercice 2 : Le Z-index de l'angoisse
Contexte : Le menu déroulant passe EN DESSOUS du texte de la page.
Prompt : "Le dropdown du header est caché par les images du contenu principal. Quel est le problème de `z-index` ou de `position` dans mon CSS ?"

Exercice 3 : La boucle infinie
Contexte : Le navigateur plante complètement.
Prompt : "Ma page freeze totalement au chargement. Identifie une boucle `while` ou un hook React (useEffect) qui tournerait à l'infini."

Exercice 4 : L'image introuvable
Contexte : Une icône brisée au lieu de l'image.
Prompt : "Mon image pointe vers `./img/logo.png` mais affiche une 404. Mon fichier HTML est dans le dossier `/pages/`. Comment corriger le chemin relatif ?"

Exercice 5 : La faute de frappe
Contexte : Un design cassé sans raison apparente.
Prompt : "Fais une relecture minutieuse de mon fichier `index.html`. Y a-t-il des balises HTML mal fermées ou des guillemets manquants ?"

Conseils vitaux

Bonnes pratiques

Le rubber duck debugging (Le canard en plastique)
Une vieille technique de développeur consiste à expliquer son bug à voix haute à un canard en plastique. Le simple fait de devoir formuler le problème clairement permet souvent de trouver la solution soi-même. Codex est votre canard interactif : en rédigeant un prompt clair, vous résoudrez la moitié du bug dans votre propre tête.

Attention

Ne corrigez pas ce que vous ne comprenez pas
Si Codex vous sort une formule mathématique magique ou une expression régulière complexe pour réparer votre formulaire, exigez des explications avant de l'accepter. Un code magique aujourd'hui est une dette technique que vous paierez cher dans 6 mois.

Tableau récapitulatif

Situation	Informations à fournir	Prompt conseillé
Page blanche	Fichier + Console	La page est blanche. La console indique : [Erreur]
Comportement illogique	Attendu vs Obtenu	Je devrais avoir X, mais j'obtiens Y. Pourquoi ?
Bug visuel	Élément + Résolution	Sur mobile (<768px), le div .card déborde.
Bug de clic	Composant JS	Le onClick du bouton ID "submit" ne se lance pas.
Lenteur	Ligne ou boucle	Cette requête met 5s à répondre, optimise-la.
Conflit de design	Classes impliquées	La classe .text-red est ignorée. Aide-moi.
Fichier introuvable	Arborescence	L'image ./img/logo.png renvoie une 404.
Erreur fatale de build	Log d'erreur entier	Voici l'erreur webpack lors de la compilation :
Typo / Syntaxe	Fichier complet	Cherche une balise mal fermée dans ce HTML.
Bug intermittent	Étapes pour reproduire	L'erreur n'apparaît que si je clique 2 fois vite.
Formulaire	Comportement par défaut	Le formulaire recharge la page (preventDefault manque ?)
Responsive	Navigateur/OS	Sur Safari iOS, le flexbox s'écrase.
Base de données	Requête + Résultat	Mon SELECT renvoie un tableau vide au lieu de 1 ligne.
Authentification	Console / Cookies	Le token est bien dans le localstorage mais refusé.
Panique totale	Dernière action connue	Ça marchait il y a 5 min avant que je touche le CSS.

Foire aux questions

Généralement parce qu'il n'a pas accès au fichier qui cause réellement le problème, ou parce que vous ne lui avez pas décrit exactement comment reproduire l'erreur.

Non. Si le bug concerne le menu, demandez à Codex d'analyser uniquement `header.html` et `navbar.js`. Plus vous ciblez, plus sa réponse sera précise.

Faites un clic droit sur la page > Inspecter > Console. S'il y a du texte rouge, copiez l'intégralité du message d'erreur (même s'il est incompréhensible) et collez-le dans le prompt.

Annulez via votre éditeur (Ctrl+Z) si le fichier est ouvert, ou utilisez Git (`git checkout -- nom_du_fichier.js`) pour restaurer la dernière version qui fonctionnait.

Résolvez-les un par un. Demandez à Codex : 'Voici les 3 erreurs dans ma console. Par laquelle dois-je commencer ?'

Oui, c'est même la meilleure méthode. 'Analyse cette erreur et explique-la-moi, mais n'écris pas encore de code de correction'.

Rechargez la page. Refaites exactement l'action qui a causé le bug. Si ça marche et que la console est vide, la correction est valide.

Un bug peut souvent être contourné (solution rapide mais sale) ou corrigé à la racine (solution longue mais propre). Codex vous laisse le choix selon l'urgence.

Précisez-le : 'Le menu déborde, mais UNIQUEMENT sur les écrans de moins de 500px'. Codex ciblera ainsi les media queries CSS adaptées.

Oui. Copiez les erreurs PHP affichées (ou celles du fichier `debug.log`) et précisez à Codex : 'Je suis sur WordPress, voici l'erreur fatale'.

Non. Il ne peut pas 'voir' la page rendue ni cliquer. Vous êtes ses yeux et ses mains.

C'est l'erreur JS la plus courante. Cela signifie que vous essayez d'utiliser une fonction ou une variable qui n'existe pas, qui a été mal orthographiée, ou qui n'a pas encore été chargée.

Oui. S'il y a un `<divv>` ou un ID mal tapé (`id="contanier"`), demandez-lui simplement de faire une relecture syntaxique du fichier.

Probablement parce que vous n'aviez pas sauvegardé le fichier, ou parce que vous avez restauré une ancienne version de votre code par erreur.

C'est le quotidien de tous les développeurs professionnels du monde entier. Bienvenue dans le métier !

À retenir

Le débogage est une enquête, et vous avez le meilleur laboratoire scientifique à votre disposition.

Les bugs ne sont pas des échecs, ce sont des étapes normales de développement.
Un prompt du type "Ça marche pas" garantit une perte de temps. Un prompt du type "Je fais X, j'obtiens Y au lieu de Z" garantit une solution.
L'inspecteur de votre navigateur (la Console) est votre meilleur ami. L'IA a besoin de ces messages rouges pour comprendre.
L'approche en entonnoir (Analyse > Propositions > Application) évite que l'IA ne détruise votre code en voulant le réparer trop vite.

Transition vers le chapitre suivant

Félicitations, vous êtes désormais capable de comprendre un projet existant, de le modifier, et de le réparer s'il se casse. Vous maîtrisez le travail quotidien d'un développeur junior.

Il est temps de passer à l'étape créative. Dans le prochain chapitre, nous allons voir comment partir d'une simple idée pour demander à Codex de générer des fonctionnalités complexes de A à Z : bases de données, formulaires avancés, animations et logique métier.

Chapitre terminé