code_mac

10 petits conseils pour debugger du Javascript

Je déteste travailler avec Javascript. Ca pète pour un rien, et les causes des bugs sont souvent juste débiles. Tu peux rager des heures à chercher dans la mauvaise direction, et tout ça pour des prunes.

Avec l’expérience, ça va mieux. Voici un petit protocole de debug qui devrait t’aider si tu es débutant, et te rafraîchir la mémoire si tu as plus de bouteille.

1. Check list de vol

  • Inclure jQuery en premier s’il est nécessaire
  • La même avec Bootstrap, juste après
  • Inclure les plug-in nécessaires à l’exécution de la page, dans l’ordre si certains dépendent des autres (exemple : extensions de thèmes)
  • Inclure les feuilles de style utilisées par les scripts avant ces derniers

2. Inspection générale

Ca ne peut pas faire de mal de le rappeler : utilise un inspecteur d’élément. C’est un outil absolument indispensable car il te permet d’avoir le détail des éléments chargés, des requêtes effectuées, et surtout le log console (j’en parle plus tard).

3. Cherche, Lycos, cherche

N’hésite pas à commenter des parties de ton script afin de vérifier jusqu’à quel point il s’exécute sans encombre. Pour trouver rapidement ce point, procède par moitiés : commente la moitié du code, puis la moitié après si tout va bien jusque-là, ou la moitié avant si ça crash déjà. Puis la moitié, la moitié de la moitié, et ainsi de suite.

Une fois ceci fait, vérifie la valeur de tes variables avec console.log() et non alert().

  • Tu obtiens plein de détails sur tes variables, et le contenu des objets/tableaux
  • C’est mille fois moins agaçant qu’une pop-up qui t’agresse

Ne me remercie pas, c’est cadeau.

4. Elémentaire, mon cher Watson

Lorsque tu travailles avec des éléments du DOM, vérifie qu’il n’y a pas de coquille, où que tu n’as pas confondu classe et ID. D’ailleurs, si tu as deux éléments avec un ID identique, c’est le moment de supprimer les doublons.

5. Chéri(e), as-tu fermé la porte ?

As-tu bien fermé parenthèses, accolades et autres crochets ? Mis des virgules à chaque ligne de déclaration de paramètres d’objets, sauf la dernière ? Javascript n’est pas aussi gentil que php et ne te dira pas forcément que c’est une erreur de syntaxe que tu as.

6. Gendarmerie nationale, vos papiers s’il vous plait

Vérifie que tes variables ont été déclarées. En Javascript, c’est obligatoire. Ensuite, contrôle que le type de chaque variable reste constant ; ne va pas mettre une string dans un int, ou traiter un array comme un objet lorsque tu le parcours. Bref, déclaration et typage stricts ; ici, on marche droit.

7. J’suis pas prêt

Attention à déclarer les fonctions avant de les utiliser. Une pratique courante consiste à inclure les scripts en fin de markup afin de charger ce dernier rapidement. Si tu as du script maison dans la partie head, assure-toi de l’exécuter après les intégrations de fin de page (avec document.ready() en jQuery par exemple). C’est vraiment une erreur casse-bonbons quand on passe d’une pratique d’écriture du html à une autre.

8. Ajax fête des fleurs

Ce n’est pas la dernière fois que tu liras cette blague pourrie, et je n’ai aucune intention de m’excuser. Le fonctionnement d’Ajax mériterait un article à lui tout seul.

  • Utilises-tu le bon type de requête http ?
  • As-tu bien passé toutes les variables dont tu as besoin dans ta requête, et as-tu testé leur valeur ?
  • Le script que tu appelles est-il libre de tout bug ?

9. Un peu de doc

Si tu coinces sur un plug-in, va donc relire la doc de ce dernier, afin de vérifier quel typage est accepté pour tel paramètre, si tu n’as pas oublié un paramètre obligatoire, etc. Ensuite, demande à Google. Clique les yeux fermés sur les liens qui t’emmènent vers Stack overflow. A l’heure actuelle je n’ai rencontré quasiment aucun problème qui n’y trouve pas une réponse.

Un de ces problèmes étant un driver doctrine pour odbc sur Symfony2, tu as de la marge, c’est promis.

10. Attention à la castagne

Face à un bug qui semble défier toute logique, il faut vérifier qu’il n’y a pas de conflit entre plusieurs plug-in, ou entre l’un d’entre eux et ton code. Retire tous ceux qui ne sont pas nécessaires au fonctionnement de ton snippet et teste-le tout seul, puis en rajoutant les plug-in un à un.

Il arrive qu’un nom de fonction ou de variable soit déjà utilisé, et tu ne vas pas t’enquiller la mono-ligne d’un fichier minified à chaque fois que tu veux rajouter une nouvelle fonctionnalité dans ton code. Par conséquent, garde la piste du conflit à l’esprit si, un beau jour, plus rien ne marche, alors que tu n’as rien touché (ou presque, n’est-ce pas ?).

Crédit photo: lien

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>