jQueryfacile | Débogage

Tous les navigateurs possèdent des outils pour développeur dont il faut se servir si le code ne donne pas le résultat attendu. On y accède à l'aide des raccourcis clavier suivants:

La console dans Google Chrome

  1. Dans cet exemple, le navigateur n'a pas trouvé le fichier de la librairie (erreur de type GET). L'URL est probablement incorrecte. La conséquence est que jQuery ($) n'est pas défini.

    C'est une simple erreur de frappe qui sera corrigée en complétant l'extension du fichier (.js et non .j).

  2. Dans cet autre exemple, la console indique une erreur de syntaxe dans le code.

    Un premier message qui nous donne comme détails, à droite de l'écran : 1) le nom du fichier où se trouve l'erreur (exemple-1.html) et la ligne concernée (:9).

  3. Après avoir cliqué sur le lien à droite de l'écran (exemple-1.html:9), on obtient plus de détails.

    Vérifier dans le code la présence de l'ouverture et de la fermeture des symboles '...', "...", (...), {...}. Vérifier la présence d'un point-virgule à la fin de chacune des instructions.

Firebug et les éditeurs de code

  1. L'extension Firebug dans Firefox se montre plus précise quant aux erreurs de syntaxe.

    Il manque un gillemet simple au sélecteur (qui est une chaîne de texte). La bonne syntaxe: $('p').

  2. Un bon éditeur de code mettra en surbrillance le numéro de la ligne concernée.

    Dans Adobe Dreamweaver CC en mode code.

Erreurs fréquentes

Quand aucune erreur n'est rapportée par la console ou l'éditeur de texte, le premier réflexe devrait être de vérifier la syntaxe des sélecteurs employés. Comme en CSS, l'oubli d'un point (.) pour le nom d'une classe ou d'un dièse (#) pour celui d'un ID pourrait être en cause.

© jQueryfacile, 2015. Contact.