Leçon de débuging [Erreur JavaScript]

Leçon de débuging [Erreur JavaScript]

Dans cet article, je vous présente JavaScript, comment débusquer les erreurs silencieuses qui font planter votre site de façon mystérieuse (mais bien problématique) et je vous donne un exemple de résolution.

A quoi sert JavaScript sur un site web ?

JavaScript est un langage fortement utilisé sur les sites web. Les diaporamas que l’on voit souvent en page d’accueil ? C’est lui. Les messages de contrôle sur les formulaires (ex: « email obligatoire ») ? C’est lui. Les popups pour votre formulaire de newsletter ? Toujours lui!

Pour résumer (et simplifier), JavaScript est utilisé pour « améliorer l’expérience utilisateur », c’est à dire, pour « faciliter la vie de vos visiteurs ».

Par contre, ça ne vous facilite pas tellement la vie à vous! En particulier quand une erreur survient!

Comment ça se manifeste?

Les erreurs JavaScript sont silencieuses, c’est à dire qu’elles ne se voient pas. Aucun message d’erreur n’est affiché sur le navigateur.

Mais comment on sait qu’il y a une erreur alors ?

C’est facile: la fonctionnalité ne marche plus! Je suis sûre que ces situations ne vous sont pas inconnues:

  • vous cliquez sur un lien et rien ne se passe
  • vous cliquez sur un bouton « J’aime » et rien ne se passe
  • votre diaporama ne défile plus, au contraire: toutes les images sont affichées les unes en dessous des autres!

Aaah, vous voyez bien de quoi je parle maintenant ?

Rassurez-vous, en de telles situations, il est possible d’aller plus loin, et de voir un message d’erreur. C’est le point de départ essentiel pour la résoudre.

Comment voir le message d’erreur ?

Pour ça, il vous faudra installer mon outil préféré: Firebug, dans son navigateur attitré: Firefox.

Ensuite, ouvrez-le en appuyant sur F12, rechargez la page qui pose problème avec F5 puis regardez dans l’onglet « Console »: un message d’erreur vous est montré.

erreur en javascript

Sur l’image ci-dessus, l’erreur qui est affichée est « get_name is not defined » (en rouge).

En vert, sur la ligne du dessous, Firebug vous indique la ligne qui pose problème, et sur la droite, le nom du fichier et le numéro de ligne précisément.

Comprendre l’erreur est une autre paire de manche…qui vient avec l’habitude et l’expérience.

Résolution d’une erreur JavaScript

Erreur générale:  « xxx is not defined »

Cette erreur signale toujours que la fonction JavaScript xxx n’a pas été définie. Concrètement, cela veut dire que votre site ne connaît pas cette fonction, et il a besoin de sa définition.

Dans mon exemple la fonction « get_name » n’est pas définie. Cela peut venir d’un plugin défaillant, ou d’une erreur de syntaxe dans un script JavaScript.

Malheureusement, il n’existe pas de réponse « prédéfinie » ou « qui marche à tous les coups ». Il faut s’adapter, au-cas-par-cas.

Exemple: si vous venez d’installer le plugin jQuery « bxslider » (il sert à faire des diaporamas, et il est très bien, je vous le recommande) et que vous avez comme message d’erreur « bxslider is not defined », vous pourrez vous dire que votre plugin ne fait pas bien son travail!

Erreur spécifique : « $ is not defined »

Une erreur classique qui apparaît quand on utilise jQuery est « $ is not defined« . Elle signifie que vous essayer d’utiliser jQuery mais que vous n’avez pas lié la librairie jQuery à votre site. Facile à résoudre: il vous suffit de lier la librairie dans le « head » de votre page, au moyen de la balise « script », comme dans l’exemple ci-dessous:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

Conclusion

Il n’y a pas de recette miracle pour résoudre les bugs sur un site web, mais les messages d’erreurs vous donnent des indications, des pistes à explorer… Ne pas les lire revient à faire une chasse au trésor avec les yeux bandés et les mains dans le dos…pas très pratique, même si au bout d’un (long) moment, vous pourriez trouver le trésor!

Pour recevoir les nouveaux articles dans votre boite mail (et bien d’autres avantages), devenez membre, c’est gratuit!

Image courtesy of FreeDigitalPhotos.net

JavaScript, tutoriel, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

7 commentaires

  1. Bonjour Marie-Eve,

    Génial ta technique pour rechercher les erreurs !!

    Mais, tu ne vous dis pas où trouver le fichier noté en bleu et qui est sur la droite dans Firebug.

    Personnellement, j’ai beaucoup d’erreur… j’ai eu un choc !

    Mais du style : « Lutilisation des « mutations Events » est obsolète. Utiliser « mutationObserver » à la place.
    Je pense que je n’ai qu’à remplacer, non ?

    J’ai aussi quelque « refecenre to undefined property » aussi… Mais là, je ne pense pas y toucher.

    A+

    Vrine

    Répondre
    • Salut sèverine,

      Pour trouver le fichier en bleu, facile…tu cliques sur la ligne sous le message d’erreur…cela va t’envoyer sur l’onglet « script » de Firebug, avec le fichier en question ouvert. Pour savoir de quel fichier il s’agit précisément, ouvre la liste déroulante juste au-dessus (elle est très discrète: c’est juste une flèche vers le bas). Le script qui est coché est celui qui est ouvert.

      Pas facile d’expliquer tout ça par écrit 😉 dis-moi si tu ne vois pas de quel endroit je parle!

      a+

      Répondre
    • Bonjour Séverine,
      Attention, les erreurs, c’est les « ronds rouges », si tu as des triangles jaunes, c’est seulement un avertissement.

      Maheureusement, je ne peux pas t’aider plus que ça…je ne connais pas les erreurs par coeur! « Lutilisation des « mutations Events » est obsolète. Utiliser « mutationObserver » à la place. » semble vouloir dire de remplacer l’un par l’autre, mais ce n’est pas dit qu’ils s’emploient de la même façon. Donc il faudra aussi modifier un peu le code. N’y touche pas si tu ne connais pas! 😉

      Répondre
  2. ah, les fameuses erreur javascript.

    Heuresement que Firebug est là…et encore , il ne fait pas tout.

    C’est vraiment une prise de tête sans nom le Javascript quand il est buggué quand même 😀

    Répondre
  3. Je vois que vous chargez dans votre exemple la library jquery depuis un serveur de google, est ce qu’il vaux mieux la téléchargez de chez eux ou l’heberger en local, ne risque t’on pas de donner des « informations » de visites à bigbrother ? ( je n’utilise pas analytics, je fuit google comme la peste :d )

    Répondre
    • Bonjour Patricia,

      Les serveurs de Google sont fiables et très rapide donc perso je link le jquery depuis Google également :)

      Tu veux donner quoi comme informations ?
      Il faut pas être trop parano non plus. 😉

      Répondre
  4. c’est une technique efficace pour rechercher les erreurs

    Répondre

Trackbacks/Pingbacks

  1. Rétrospective 2012 et bonne année 2013 ! - Les Doigts dans le Net - [...] Leçon de débuging [Erreur JavaScript] [...]
  2. Comment installer Firebug sur Chrome et Internet Explorer ? - Les Doigts dans le Net - […] et je ferai d’autres vidéos pour vous expliquer spécifiquement les différentes fonctionnalités que vous pouvez utiliser avec ces modules…

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint