Is there a way to change variable values while debugging JavaScript?

Question

I have a breakpoint on this piece of code (using Firebug):

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

How can I skip this validation part and get into the if clause even if my dom.forumid is not valid, i.e. the call to formValidate() returns false? So how can I make it return true?

I was thinking about modifying the JavaScript, but I don't know how that's done.

Answer 1

In Firebug I do this by entering an assignment into the watch input field

• to assign a new value
• to assign a new function that returns the value I expect

This also works in Chrome ~33 (just tested) execpt: one has to enter the assignment into the console (which actually works in Firefox too, but using the watch panel is faster :).

In Firebug, you have to edit and re-save the assignment typed into the input on each break.

Of course, replacing the function will prevent the code from functioning normally on further runs. To avoid this one might save the original value to window._savedFnX or so and then do the assingment again assigning the saved function/value. But I think this is a workaround from saving one stepping through the code again and again to reach the point of interest. I often realize that there's a bad condition and then I want to continue (while the code would not) to test the rest of the code.

Take a look at these screenshots:

Code background

In the screenshot photo is an instance with this code:

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

The method isLoaded() will be replaced in the example to always return true. :)

Firebug

(Applies to Firebug ~1.12)

• Stop at breakpoint
• Go to the console
• Assign function that returns the value you want to the variable in scope (or being reachable) [ORANGE]

The [BLUE] box highlights the the value that would be returned by isLoaded() and the value that is being returned by the replaced function.

Chrome

(Applies to Chrome ~34.0)

Note: in Chrome you can also edit the source code and re-run the modified version.

• Stop at breakpoint
• Go to the console
• Assign function that returns the value you want to the variable in scope (or being reachable) [ORANGE]
• (Refresh to see the result) [GREEN]

The [BLUE] box highlights the the value that would be returned by isLoaded() and the value that is being returned by the replaced function.

Answer 2

As of today (Chrome 67) you can just double-click any variable on the right hand side under the "Scope" section and edit it in real-time.