Comprendre le fonctionnement interne de Codex

Introduction

L'erreur la plus courante chez les débutants est de penser que Codex possède une sorte de conscience globale et "connaît" tout de votre projet de manière magique et instantanée.

Dans les faits, ce n'est pas le cas. Codex est un programme informatique extrêmement avancé, mais il reste soumis à des règles physiques : il ne peut analyser que ce qu'on lui donne, et sa "mémoire" (la fenêtre de contexte) est limitée.

Savoir comment Codex "regarde" votre projet, comment il navigue entre vos fichiers et comment il tire ses conclusions va transformer votre manière de lui poser des questions. Vous allez cesser de lutter contre l'outil pour commencer à collaborer intelligemment avec lui.

Comment Codex analyse un projet

Lorsque vous appuyez sur "Entrée" après avoir tapé un prompt, il se passe énormément de choses en coulisses en l'espace d'une seconde.

Voici le cheminement exact de sa réflexion :

1. Ouverture et scan : Codex regarde l'arborescence du dossier ouvert dans VS Code. Il dresse une liste des noms de fichiers (ex: index.html, style.css, app.js).
2. Lecture de votre prompt : Il analyse sémantiquement votre demande. (ex: "Change la couleur d'arrière-plan").
3. Sélection des fichiers : En croisant son scan et votre prompt, il déduit les fichiers utiles. (ex: Il va ouvrir et lire style.css, mais ignorera app.js).
4. Création du contexte : Il assemble votre prompt et le contenu des fichiers sélectionnés dans un énorme bloc de texte caché.
5. Envoi à l'IA : Ce bloc est envoyé aux serveurs d'OpenAI.
6. Génération : L'intelligence artificielle produit la solution.
7. Intégration locale : Codex reçoit la réponse et modifie visuellement vos fichiers dans VS Code.

graph TD;
    A[Prompt utilisateur] --> B[Scan du dossier];
    B --> C[Lecture des fichiers pertinents];
    C --> D[Création du grand contexte];
    D --> E[Envoi à OpenAI];
    E --> F[Génération du code];
    F --> G[Modification locale];

Comment Codex choisit les fichiers

Puisqu'il ne peut pas lire des milliers de fichiers à chaque question, il fait des choix. Voyons plusieurs scénarios :

• Scénario 1 : Modifier une couleur
  Fichiers consultés : Principalement les fichiers `.css` ou les composants de style.
  Pourquoi : Il sait que les couleurs ne se gèrent généralement pas dans la logique JavaScript.
• Scénario 2 : Corriger un bug sur un clic de bouton
  Fichiers consultés : Le fichier HTML (pour voir l'ID du bouton) et le fichier JavaScript (pour voir la fonction attachée).
  Pourquoi : Une interaction nécessite toujours ces deux couches.
• Scénario 3 : Ajouter une nouvelle page complexe
  Fichiers consultés : Le routeur du projet, le menu de navigation existant, et l'architecture générale.
  Pourquoi : Une nouvelle page doit être reliée au reste de l'application pour exister.

Le contexte est essentiel

Le contexte est l'ensemble des informations dont dispose Codex au moment de répondre. C'est l'essence même de son intelligence.

Comparons deux situations :

Situation A : Peu d'informations (Contexte pauvre)
Vous êtes dans un dossier vide. Vous dites : "Crée un composant de carte produit."
Codex va générer une carte générique, avec des couleurs par défaut (souvent du bleu et du gris), une police standard, et une architecture HTML classique. C'est du "prêt-à-porter".

Situation B : Beaucoup d'informations (Contexte riche)
Vous êtes dans un dossier contenant déjà votre fichier charte-graphique.css et votre fichier produits.js. Vous dites la même chose : "Crée un composant de carte produit."
Codex va analyser vos fichiers. Il verra que votre site est rouge et noir. Il verra que vos produits ont une "taille" et un "poids". La carte générée utilisera VOS couleurs et VOS données. C'est du "sur-mesure".

Pourquoi ouvrir le bon dossier est indispensable

Nous l'avons vu au chapitre 5, mais il faut comprendre pourquoi c'est techniquement si dangereux de se tromper.

• Si vous ouvrez votre dossier "Documents" complet : Codex va scanner des milliers de fichiers PDF, Word et photos. L'analyse prendra un temps infini, sa mémoire explosera (Token Limit Reached) et il ne pourra rien faire.
• Si vous ouvrez le mauvais projet : Vous demandez de modifier la page d'accueil de votre Blog, mais vous êtes dans le dossier de votre application Météo. Codex va chercher `index.html`, trouver celui de la météo, et le détruire pour y mettre un blog.
• Si vous ouvrez le dossier parent (qui contient 3 projets) : Codex va mélanger les styles du projet A avec la logique du projet B. C'est la recette garantie d'un désastre technique.

Comment Codex comprend les relations entre les fichiers

En programmation web, les fichiers ne sont jamais isolés. Ils forment une toile d'araignée.

• HTML ↔ CSS : Le HTML porte des noms de classes (ex: class="btn"). Le CSS cible ces classes. Codex lit les deux pour s'assurer qu'il utilise les bonnes classes.
• HTML ↔ JS : Le HTML possède des identifiants (ex: id="submit"). Le JS écoute ces identifiants. Si Codex modifie l'ID dans le HTML, il ira le modifier dans le JS.
• Système d'imports : Si le fichier A dit import { data } from './fichierB.js', Codex comprend immédiatement que le fichier B est crucial pour le fonctionnement du fichier A.

graph LR;
    HTML[Page HTML] -->|Utilise les classes| CSS[Feuille de Style];
    JS[Script JS] -->|Cible les ID| HTML;
    JS -->|Importe des données| JSON[Fichier Données];

Les limites de Codex

L'IA n'est pas infaillible. Il est primordial d'accepter ses limites :

• Il peut manquer de contexte : Si vous lui demandez de corriger un bug visuel sans lui dire que le bouton est à l'intérieur d'un formulaire, sa solution CSS pourrait être erronée.
• Il peut interpréter de travers : Le mot "header" désigne à la fois l'en-tête visuel d'un site et des données techniques de serveur. Si votre prompt est ambigu, il peut agir au mauvais endroit.
• Il ne devine pas vos préférences : Face à un problème, il y a souvent 5 manières valables d'écrire le code. Il choisira la plus courante. Si vous en préférez une autre, vous devez l'exiger.

Pourquoi deux personnes obtiennent parfois des réponses différentes

C'est une grande frustration chez les débutants : "Mon collègue a tapé ce prompt, il a eu un super résultat. Moi, le site a crashé. Pourquoi ?"

Parce que le prompt n'est que la partie visible de l'iceberg. L'IA réagit à la somme du Prompt + le Contexte.

Si le collègue avait un code très bien nommé (calculerTotalPanier()) et que vous aviez un code opaque (fonctionX()), Codex a parfaitement compris le projet du collègue, mais a dû deviner le vôtre (et s'est trompé).

Atelier pratique : Comprendre par l'exemple

Ces exercices mentaux vous aideront à anticiper le comportement de Codex.

Les erreurs les plus fréquentes

Maintenant que vous connaissez la mécanique, voici les erreurs logiques que font tous les débutants.

• Symptôme : "Codex modifie mes anciens projets sans que je le demande."
  Cause : Vous avez ouvert le dossier "Documents" entier au lieu de cibler un sous-dossier.
  Bonne pratique : Vérifiez toujours le nom en haut de la barre latérale gauche de VS Code.
• Symptôme : "Il a cassé mon design en changeant le JS."
  Cause : Il a renommé un ID en JavaScript sans mettre à jour le CSS associé.
  Bonne pratique : Demandez : "Assure-toi de mettre à jour le CSS si tu modifies des ID ou des classes."
• Symptôme : "La réponse est géniale, mais elle utilise une bibliothèque que je n'ai pas."
  Cause : Vous n'avez pas lu la proposition avant de l'accepter.
  Bonne pratique : Lisez toujours. S'il propose `npm install ...`, demandez-lui d'utiliser du code natif (vanilla) à la place.
• Symptôme : "Codex ne comprend pas mon code."
  Cause : Vos variables s'appellent `a`, `b`, `c` et `truc123`.
  Bonne pratique : Renommez vos variables (`prixTotal`, `listeUtilisateurs`). L'IA a besoin de mots pour comprendre le sens.
• Symptôme : "Il recrée les mêmes erreurs en boucle."
  Cause : Il a conservé votre mauvais code en mémoire dans le contexte de la conversation.
  Bonne pratique : Si l'échange devient chaotique, dites-lui d'oublier la précédente conversation ou ouvrez un nouveau terminal.
• Symptôme : "La fonctionnalité marche, mais mon code est devenu illisible."
  Cause : Codex empile des rustines (patchs) à force de corriger sans cesse le même fichier.
  Bonne pratique : Une fois par semaine, demandez-lui : "Prends le temps de refactoriser et nettoyer ce fichier pour qu'il soit plus lisible."
• Symptôme : "Il me supprime la moitié de la page."
  Cause : Face à un bug complexe, il a décidé que la meilleure solution était de repartir de zéro, sans vous prévenir.
  Bonne pratique : L'approche experte vue au chapitre 7 : "Analyse le problème, mais n'écris encore aucun code."
• Symptôme : "Je lui donne un prompt parfait, il me répond 'Comment puis-je vous aider ?'"
  Cause : Déconnexion réseau ou erreur interne de l'API OpenAI.
  Bonne pratique : Re-tapez votre prompt.

Bonnes pratiques : Soyez le chef d'orchestre

Tableau récapitulatif

Foire aux questions

À retenir

Transition vers le chapitre suivant

Maintenant que vous savez comment Codex navigue dans vos dossiers et sélectionne ses informations, vous êtes prêt pour la vraie vie du développement.

Jusqu'ici, nous avons opéré des modifications simples, souvent confinées à un seul fichier. Dans le prochain chapitre, nous allons apprendre à piloter des modifications à grande échelle : comment demander à Codex de créer ou de modifier des dizaines de fichiers simultanément, sans perdre le contrôle de votre projet.