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

javascript debugging firebug

53,028

Solution 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.

Screenshot of Firebug showing the watch panel with 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.

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

Solution 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.

53,028

user1534664

My name is user1534664. In real life people call me user.

Updated on July 17, 2022

Comments

user1534664 almost 2 years
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.
- a coder almost 10 years
  
  Firebug doesn't change code, it reads it, and validates it. You can use // to turn off javaScript validating.
- user1534664 almost 10 years
  
  @Placeholders_in_use I dont run the server so I cant change the source code files
- a coder almost 10 years
  
  Do you run the client?
- user1534664 almost 10 years
  
  @Placeholders_in_use yeah, I am visiting my friend's website, so my question is how I can get past the clientside validation. I want to see if he's done any server validation.
- a coder almost 10 years
  
  That's a whole different question, because you're wanting to send data to the page, not change the code.
- user1534664 almost 10 years
  
  @Placeholders_in_use Yeah, I was thinking this might've been a way to get it done. Can you consult me in the right direction?
- a coder almost 10 years
  
  Ask the question of "With firebug, or other software is there a way to send other variable values through JavaScript?".
- a coder almost 10 years
  
  not completely, you also need to rephrase the body. I tried changing questions this way, and got on question ban :'(
- user1534664 almost 10 years
  
  @Placeholders_in_use lol fixed, good luck with lifting it. Would you know the answer to my question?
- a coder almost 10 years
  
  I just need a few up votes, and no, I don't :(, I'm more of a PHP guy.
- Sebastian Zartner almost 10 years
  
  If it's the website of your friend, why don't you tell him he should check his server-side validation? Also note that you could simply turn off JavaScript to disable the client-side validation.
user1534664 almost 10 years

so basically you just redeclare the function when ur at the breakpoint?
Octaviotastico about 3 years

Could you add another { key: value } inside the variable "win"? Instead of modifying name, or patient.