Leçon de débuging [Erreur JavaScript]

Partagez si vous aimez ->

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 !

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons