Programmation JavaScript/Débogage

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche


Afficher des objets[modifier | modifier le wikicode]

Pour afficher des objets non scalaires (équivalent du var_dump() de PHP) :

alert(JSON.stringify(monObjet1));

Débogage au sein d'un navigateur[modifier | modifier le wikicode]

Firefox[modifier | modifier le wikicode]

  • Firefox fournit une console d'erreur JavaScript (Menu "Outils" / "Console d'erreur")
  • Des extensions spécifiques permettent de faciliter le débogage du JavaScript :
    • Venkman JavaScript Debugger[1].
    • Firebug pour Firefox, qui était indispensable avant que le navigateur intègre DevTools.

Un mode d'exécution pas à pas est ainsi possible dans l'onglet Débogueur (CTRL + Maj + S). En rafraichissant la page, il permet d'afficher les contenus des variables, sans avoir à placer des console.log() dans le code.

Chrome[modifier | modifier le wikicode]

Internet Explorer[modifier | modifier le wikicode]

Sous IE, dans les options avancées (Menu "Outils" / "Options Internet" / Onglet "Avancées"), décocher 2 options "désactiver le débogage de script". Si une erreur JavaScript est présente dans la page, une popup vous demandera si vous souhaitez ouvrir le déboguer de Microsoft (Microsoft Script Editor).

Ce navigateur vous dira ainsi, qu'il ne reconnait pas la fonction getElementsByClassName disponible dans d'autres navigateurs.

F12 lance le débogage de la page.

Exemples d'erreur[modifier | modifier le wikicode]

$ is not defined[modifier | modifier le wikicode]

jQuery n'est pas importé, ou alors pas dans le bloc "head".

addOnloadHook is not defined[modifier | modifier le wikicode]

La fonction doit être chargée sans addOnloadHook().

missing ) after argument list[modifier | modifier le wikicode]

Peut provenir d'un littéral qui n'est pas entre guillemets.

ReferenceError: invalid assignment left-hand side[modifier | modifier le wikicode]

Un attribut est redéfini avec le mauvais opérateur, par exemple :

// Remplacer "$('#champ1').val() = '1';" par :
$('#champ1').attr('value', '1');

// ou "$('#URL1').attr('href') = 'https://fr.wikibooks.org';" par :
$('#URL1').attr('href', 'https://fr.wikibooks.org');

npm[modifier | modifier le wikicode]

ERR! Maximum call stack size exceeded ou ERR! code EBUSY[modifier | modifier le wikicode]

Lors d'un npm install, il faut alors lancer npm rebuild. Si cela ne fonctionne pas, fermer les programmes qui lisent ce code (ex : IDE) et lancer : npm cache clean --force; npm install. Sinon, mettre à jour Node.

EBUSY resource busy or locked[modifier | modifier le wikicode]

Exclure le dossier des scans antivirus et antimalware.

Références[modifier | modifier le wikicode]

Voir aussi[modifier | modifier le wikicode]