CODEWITHSUNDEEP
javascriptdebugginggoogle-chrome
tato
tato

Reputation: 5549

Is it possible to change javascript variable values while debugging in Google Chrome?

I'm debugging a javascript app (using Chrome dev tools), and I would like to change some variable values while stepping through the code.

Is that possible at all?

I have tried and got something like:

> modeline
1
> modeline=0
0             <<< seems to work but... 
> modeline
1             <<< ups!!

But I'm unable to find any documentation that states what can or can't be done...

Upvotes: 100

Views: 167205

Answers (12)

LeonardoX
LeonardoX

Reputation: 1303

The only way I could change variable values with success (in addition to doing it in console window) is modifying the script directly in the chrome editor under "Sources" Tab (this changes the behavior of your script until you refresh the page), but that changes will be lost when a browser refresh, so be careful. NOTE: This works also if you want to modify any line of code of your script but it doesn't work with typescript files coming from Angular projects.

Upvotes: 1

jcollum
jcollum

Reputation: 46579

I do this differently than any of the other answers if I'm dealing with code that gets hit a lot (React render cycles).

  1. Make a conditional breakpoint.
  2. In the breakpoint condition, set your value flags.showAccountCard = false; -- the value will be set every time that breakpoint is hit.
  3. However if you use flags.showAccountCard = true; the breakpoint will be hit every time because the engine is returning the value that it was set to (true) and that value means the breakpoint should be hit. To get around this add false on the same line: flags.showAccountCard = true; false;. This will set the value to true but not actually stop on the breakpoint.

This will allow you to set a value every time the exec pointer hits that line without stopping execution.

Tested in Chrome 99.

Upvotes: 1

Mika&#235;l Mayer
Mika&#235;l Mayer

Reputation: 10701

Why is this answer still getting upvotes?

There is a better answer than this one after all these years, and I approve it since I'm using it all the time. Go upvote Tyler Collier's answer instead. They explain that you can either modify values in the console or in the stack trace. No need for a trick.

Obsolete answer

This is now possible in chrome 35 (today as of July 11, 2014). I don't know which version allowed it first though.

Just tested @gilly3 example on my machine and it works.

  • Open the console, in Sources and the tab Snippets, add a new snippet, paste the following code into it:

    var g_n = 0; function go() { var n = 0; var o = { n: 0 }; return g_n + n + o.n; // breakpoint here }

  • Right-click the snippet name, click 'Run' (this does not fire the function though)

  • Add the breakpoint at the return statement.

  • In the console below, type go()

  • and change the variable values as demonstrated below

function with local modification allowed.

and the returned result g_n + n + o.n is 30.

Upvotes: 70

Matthew Marichiba
Matthew Marichiba

Reputation: 2092

To modify a value every time a block of code runs without having to break execution flow:

The "Logpoints" feature in the debugger is designed to let you log arbitrary values to the console without breaking. It evaluates code inside the flow of execution, which means you can actually use it to change values on the fly without stopping.

Right-click a line number and choose "Logpoint," then enter the assignment expression. It looks something like this:

enter image description here

I find it super useful for setting values to a state not otherwise easy to reproduce, without having to rebuild my project with debug lines in it. REMEMBER to delete the breakpoint when you're done!

Upvotes: 1

Tyler Collier
Tyler Collier

Reputation: 11990

Yes! Finally! I just tried it with Chrome, Version 66.0.3359.170 (Official Build) (64-bit) on Mac.

You can change the values in the scopes as in the first picture, or with the console as in the second picture.

Chrome debugger change values

enter image description here

Upvotes: 41

gilly3
gilly3

Reputation: 91487

Why is this answer still getting upvotes?

Per Mikaël Mayer's answer, this is no longer a problem, and my answer is obsolete (go() now returns 30 after mucking with the console). This was fixed in July 2013, according to the bug report linked above in gabrielmaldi's comment. It alarms me that I'm still getting upvotes - makes me think the upvoter doesn't understand either the question or my answer.

I'll leave my original answer here for historical reasons, but go upvote Mikaël's answer instead.

The trick is that you can't change a local variable directly, but you can modify the properties of an object. You can also modify the value of a global variable:

var g_n = 0;
function go()
{
    var n = 0;
    var o = { n: 0 };
    return g_n + n + o.n;  // breakpoint here
}

console:

> g_n = 10
  10
> g_n
  10
> n = 10
  10
> n
  0
> o.n = 10
  10
> o.n
  10

Check the result of go() after setting the breakpoint and running those calls in the console, and you'll find that the result is 20, rather than 0 (but sadly, not 30).

Upvotes: 39

Jeff Lowery
Jeff Lowery

Reputation: 2597

I'm able to modify a script variable value by assignment in the Console. Seems simplest.

Upvotes: 3

GilesDMiddleton
GilesDMiddleton

Reputation: 2320

I was having the same issue, went to the 'About Google Chrome'->Help and it said I needed to restart my browser to get the latest updates.

I did this, and suddenly, I can now change local variables. Simply click the variable you want to edit in the Scope Variables window, and type in your new value.

I did notice some oddities though, that I had to step over some unrelated var assignments before I could alter the text in the right hand window (Scope Variables).

Upvotes: 0

brianpeiris
brianpeiris

Reputation: 10795

This is an acknowledged bug in the Chrome Dev Tools:

http://code.google.com/p/chromium/issues/detail?id=124206

Upvotes: 8

mdubez
mdubez

Reputation: 3144

Actually there is a workaround. Copy the entire method, modify it's name, e.g. originalName() to originalName2() but modify the variable inside to take on whatever value you want, or pass it in as a parameter.

Then if you call this method directly from the console, it will have the same functionality but you will be able to modify the variable values.

If the method is called automatically then instead type into the console

originalName = null;
function originalName(original params..)
{
    alert("modified internals");
    add whatever original code you want
}

Upvotes: 2

Bobo
Bobo

Reputation: 9163

Firebug seems to allow you to do that.

Upvotes: 5

Vlad GURDIGA
Vlad GURDIGA

Reputation: 1334

It looks like not.

Put a breakpoint, when it stops switch to the console, try to set the variable. It does not error when you assign it a different value, but if you read it after the assignment, it's unmodified. :-/

Upvotes: 5

Related Questions