web-dev-qa-db-fra.com

Existe-t-il un moyen de modifier les valeurs des variables lors du débogage de JavaScript?

J'ai un point d'arrêt sur ce morceau de code (en utilisant Firebug):

if (validator.formValidate([dom.forumid]))

Comment ignorer cette partie de validation et accéder à la clause if même si mon dom.forumid N'est pas valide, c'est-à-dire que l'appel à formValidate() renvoie false? Alors, comment puis-je le faire retourner true?

Je pensais à modifier le JavaScript, mais je ne sais pas comment cela se fait.

15
user1534664

Dans Firebug, je le fais en entrant une affectation dans le champ de saisie de la montre

  • attribuer une nouvelle valeur
  • d'attribuer une nouvelle fonction qui renvoie la valeur que j'attends

Cela fonctionne également dans Chrome ~ 33 (juste testé) sauf: il faut saisir l'affectation dans la console (qui fonctionne également dans Firefox, mais l'utilisation du panneau de surveillance est plus rapide :).

Dans Firebug, vous devez éditer et ré-enregistrer l'affectation tapée dans l'entrée à chaque pause.

Bien sûr, le remplacement de la fonction empêchera le code de fonctionner normalement lors des exécutions ultérieures. Pour éviter cela, vous pouvez enregistrer la valeur d'origine dans window._savedFnX Environ, puis refaire l'assignation en affectant la fonction/valeur enregistrée. Mais je pense que c'est une solution de contournement pour en sauver un en parcourant le code encore et encore pour atteindre le point d'intérêt. Je me rends souvent compte qu'il y a un mauvais état et ensuite je veux continuer (alors que le code ne le ferait pas) pour tester le reste du code.

Jetez un œil à ces captures d'écran:

Arrière-plan du code

Dans la capture d'écran photo est une instance avec ce code:

{
   ...
   _loaded: false, // set to true on some condition
   ...
   isLoaded: function(){
       return this._loaded;
   },
   ...
}

La méthode isLoaded() sera remplacée dans l'exemple pour toujours retourner true. :)

Pyromane

(S'applique à Firebug ~ 1.12)

  • Arrêter au point d'arrêt
  • Accédez à la console
  • Attribuer une fonction qui renvoie la valeur souhaitée à la variable dans la portée (ou accessible) [ORANGE]

La zone [BLUE] Met en évidence la valeur qui serait retournée par isLoaded() et la valeur qui est retournée par la fonction remplacée.

Screenshot of Firebug showing the watch panel with replaced function

Chrome

(S'applique à Chrome ~ 34.0)

Remarque: dans Chrome vous pouvez également modifier le code source et réexécuter la version modifiée.

  • Arrêter au point d'arrêt
  • Accédez à la console
  • Attribuer une fonction qui renvoie la valeur souhaitée à la variable dans la portée (ou accessible) [ORANGE]
  • (Actualisez pour voir le résultat) [GREEN]

La zone [BLUE] Met en évidence la valeur qui serait retournée par isLoaded() et la valeur qui est retournée par la fonction remplacée.

Screenshot of Chome console showing the console with replaced function and the watch panel with new return value

6

À partir d'aujourd'hui (Chrome 67), vous pouvez simplement double-cliquer sur n'importe quelle variable sur le côté droit sous la section "Portée" et la modifier en temps réel.

enter image description here

11
Nick Steele