Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 496
tato Avatar asked Jan 05 '11 10:01

tato


People also ask

How do I change the value of variables in Google Chrome?

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.

How do I edit JavaScript while debugging?

After loading a web page completely, press the F12 key to open the developer tools, then open the 'Sources' tab. Now open any Javascript file loaded on the browser and you can directly edit it by clicking anywhere in that file. After making modifications press Ctrl+S to save the changes.


2 Answers

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.

like image 96
Mikaël Mayer Avatar answered Oct 03 '22 06:10

Mikaël Mayer


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

like image 44
gilly3 Avatar answered Oct 03 '22 06:10

gilly3