Linov · Parcours dev
Exercice · Application météo

Quand tu bloques

Bloquer fait partie du métier. Ce qui distingue un développeur d'un débutant, ce n'est pas de ne jamais bloquer : c'est d'avoir une méthode pour se débloquer.

Avant tout : lis le message d'erreur en entier

Sérieusement. Le fichier, la ligne, et ce qu'il dit. La moitié des blocages se résolvent là.

La méthode qui marche à tous les coups

Dans l'ordre. Ne saute pas d'étape.

  1. Explique ton problème à voix haute, comme à quelqu'un qui ne connaît pas le projet. Oui, tout seul. Ça s'appelle le rubber duck debugging, et ça résout un blocage sur trois avant même la fin de la phrase.
  2. Affiche en console la valeur juste avant l'endroit qui casse. Est-elle vraiment ce que tu crois ? (Non. C'est presque toujours ça.)
  3. Vérifie l'onglet « Réseau » de la console. Ta requête est-elle vraiment partie ? Avec quelle URL exacte ? Quelle réponse ?
  4. Relis la doc MDN de la fonction concernée. Pas un blog, pas Stack Overflow : MDN.
  5. Demande une explication à l'IA : pas une correction.
  6. Va voir ton encadrant, avec ce que tu as déjà essayé.

La règle des 30 minutes

Bloqué·e plus de 30 minutes sur le même problème ? Tu le notes dans le journal, et soit tu passes à l'étape suivante, soit tu appelles ton encadrant. Les deux sont acceptables. Rester bloqué·e en silence toute la matinée ne l'est pas.

Les cinq blocages classiques de cet exercice

Chacun a une cause précise, et tu as tous les liens nécessaires pour la trouver. Je ne donne volontairement pas la solution : cherche laquelle te concerne, puis ouvre la piste.

1. J'obtiens Promise { <pending> } au lieu de mes données

Une piste (pas la réponse)

Que renvoie fetch(), exactement ? Et que fait await ? Compte le nombre d'opérations asynchrones dans ta fonction, puis compte le nombre de await. Les deux nombres sont-ils égaux ?

2. J'obtiens undefined alors que je vois bien la donnée dans le JSON du navigateur

Une piste

Affiche l'objet parent en console, pas la propriété finale. Compare sa forme réelle avec le chemin que tu as écrit. Tu es probablement un niveau trop bas, ou un niveau trop haut. Le chemin que tu as noté à l'étape 3 est-il toujours exact ?

3. Cannot read properties of undefined (reading '...')

Une piste

Les deux API renvoient-elles la même forme de données ? L'une donne un tableau de résultats, l'autre un objet. Utilises-tu le bon accès pour la bonne réponse ? Et que contient ce tableau quand la recherche ne trouve rien ?

4. Mon JS dit que mon élément HTML est null, alors qu'il existe

Une piste

À quel moment exact ton script s'exécute-t-il, par rapport à la construction de la page par le navigateur ? Deux solutions existent : trouve-les toutes les deux, et choisis en connaissance de cause. (Vérifie aussi ton identifiant, à la lettre près.)

5. La page se recharge et tout disparaît quand je valide

Une piste

Quel est le comportement par défaut d'un formulaire qu'on soumet ? Comment demande-t-on au navigateur de ne pas l'appliquer ?

Autres symptômes possibles

SymptômeOù regarder
Rien ne s'affiche et il n'y a aucune erreur Onglet Réseau : le navigateur charge-t-il bien le fichier que tu es en train d'éditer ? Vide le cache (Ctrl+Maj+R).
Erreur « CORS » dans la console Tu as probablement ouvert ton fichier en file://. Passe par Live Server. Comprendre CORS
Mon CSS ne s'applique pas Inspecte l'élément : la règle apparaît-elle barrée (surchargée) ou totalement absente (chemin de fichier, ou sélecteur qui ne correspond à rien) ?
Ça marche pour « Paris » mais pas pour « Saint-Étienne » Comment construis-tu ton URL ? Que deviennent les accents et les espaces ? URLSearchParams
La console affiche du rouge, mais l'application a l'air de marcher Ce n'est pas « rien ». Un cas non géré finit toujours par se voir. Lis l'erreur et corrige-la.

Trois réflexes à prendre dès aujourd'hui

Lire le message, pas le survoler

Un message d'erreur JavaScript te donne le type de problème, le fichier et la ligne. C'est plus d'information que tu n'en obtiendras de n'importe quelle recherche Google.

Réduire le problème

Ça ne marche pas ? Enlève tout ce qui n'est pas indispensable jusqu'à ce que ça marche, puis remets les morceaux un par un. Le morceau qui casse tout est ton coupable.

Une seule modification à la fois

Si tu changes trois choses puis que ça marche, tu ne sais pas laquelle a corrigé le problème, et tu n'as rien appris.

← Retour au parcours