Programmation JavaScript/Débogage

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche
Programmation JavaScript
Programmation JavaScript
Sommaire
  1. Introduction 100 percent.svg
  2. Présentation
  3. Syntaxe 50%.svg
    1. Ligne d'instruction 100 percent.svg
    2. Ordre d'évaluation 100 percent.svg
    3. Bloc d'instructions 100 percent.svg
    4. Identificateurs 100 percent.svg
    5. Expression littérale 100 percent.svg
    6. Commentaire 100 percent.svg
    7. Mots réservés et constantes 100 percent.svg
    8. Variables 100 percent.svg
    9. Opérateurs 100 percent.svg
    10. Structures de contrôle 75%.svg
    11. Fonctions utilisateur 100 percent.svg
    12. Évènement 75%.svg
  4. Objets prédéfinis 00%.svg
    1. window 25%.svg
    2. document 25%.svg
    3. navigator 25%.svg
    4. Array 100 percent.svg
    5. Boolean 00%.svg
    6. Date 25%.svg
    7. Error 00%.svg
    8. Function 00%.svg
    9. Math 25%.svg
    10. Number 25%.svg
    11. Object 00%.svg
    12. String 25%.svg
    13. Element 25%.svg
    14. RegExp 00%.svg
  5. Fonctions prédéfinies
  6. Mise en œuvre
  7. Programmation avancée
    1. Opérateurs de bits 00%.svg
    2. Programmation objet 00%.svg
    3. Gestion d'évennements 00%.svg
    4. Exceptions et erreurs 00%.svg
    5. Interface DOM 00%.svg
    6. Objets Microsoft 00%.svg
    7. Applets Java 00%.svg
    8. Notation JSON 00%.svg
    9. AJAX 00%.svg
  8. Frameworks
    1. Dojo
      1. Hello World
      2. Widgets
      3. Ressources
    2. jQuery
    3. Node.js
    4. React
  9. Tests
    1. Ava
    2. Jest
    3. Selenium
  10. Débogage
  11. Références25%.svg
Modifier ce modèle ce sommaire


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');

uncaught exception: out of memory <inconnu>[modifier | modifier le wikicode]

Le quota a été atteint.

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

Voir aussi[modifier | modifier le wikicode]