Break on a change of variable value

Question

Similar to other questions here, like this one.

Is there a way to break on the change of a variable value in any JavaScript debugger? (like IE Developer tools, Visual Studio, or Firebug)?

I guess it's something like a "watch variable", but I want to be able to see the callstack and pause it when the change to the variable actually occurs.

An alternative approach might be to override the value setting with a custom setter, and put a breakpoint in that, but unfortunately that won't work for IE AFAIK.

UPDATE It appears that this type of behavior is available at least for unmanaged code written in C++ So I thought maybe a javascript engine written in C++ (Google's V8) might have something similar, but that doesn't appear to have what I want either.

Solution 1

You don't even need an IDE - you can use "Object.watch()":

Object.Watch Tutorial

If you use any one debugger, I'd strongly recommend Firebug. For all your Javascript, HTML and CSS needs :-):

http://getfirebug.com/javascript

===========================================================

Update for 2019:

• Object.Watch is Ancient History. Uncoincidentally, it's unavailable in most contemporary browsers.

• My personal favorite JS debugging tool these days is Chrome Developer Tools.

• My personal favorite JS IDE (for Angular, .Net Core, etc) is Microsoft Visual Studio Code (MSVC).

• You can do just about any "expected" debugging operation - including set watches - with the Chrome debugger (just as you could with FF Firebug).

• Chrome debugger is well integrated with the MSVC IDE.

• Both are "free" (at least "free as in beer"); both run well on Windows, Mac and Linux.

Solution 2

I'm having success with this library in Chrome and it looks to support all major browsers.

https://gist.github.com/eligrey/384583

Just include the .js file, then call:

yourObject.watch('someProperty', function() { 
    doWhatYouWant(); 
    debugger; 
    console.write('this too'); 
    alert('Object Changed'); //etc 
});

Comments

[user420667]

+1 b/c I would imagine this would work. However, I don't think it's compatible with a lot of browser atm, b/c it's nonstandard javascript 1.8.6 : developer.mozilla.org/en/JavaScript/Reference/Global_Objects‌​/…

[GuruM]

Haven't been able to try it out but as the link above specifies using setter/getter methods may be a better approach: developer.mozilla.org/en-US/docs/JavaScript/Guide/…

[Joncom]

Did not work for me using Chrome. I ran the Gist JavaScript first. Then I executed watch(myObject, 'propertyName', function() { console.log('changed!'); });. Even though the property value was changing, the console.log message never came.

[rainabba]

Check for an error in the console when you call watch(). The library definately works so I'd guess that either it's not loading or your call to it isn't succeeding.

[rainabba]

Normally I'd use jsFiddle but they're down right now so here's a working example. Looks like either my syntax was wrong or they've made the approach more smooth (likely the former): codepen.io/anon/pen/DAegv

[Michael]

not working for me either, but I'm trying to watch a closure variable... not sure if this supports that or not. not getting errors, but it's never hitting the debugger statement.

[user420667]

If on an adjacent line you had n = i++ (so now you have a loop where i is incremented twice) and you didn't put the breakpoint on the adjacent line, would it stop when n turned 3 on the adjacent line? If not then this wouldn't do what I was looking for. Alternatively if n was a property of an object and it could be set in lots of places, would putting the watch on one setter of n be sufficient to cover all settings of n in all files?

[Pere]

Haven't tried that precise example but to my knowledge I would say yes, as the expression to evaluate in the "Edit breakpoint..." dialog doesn't need to be the same as the code in the line where the breakpoint is placed on. It doesn't need to be a "var equals value" neither; you can put in, for instance, something like i+j <= k*n. You can even comment the expression to disable it. It works the same as putting if(n==3){ dummy = true } inside your code and placing your breakpoint in the dummy line, but just keeping it in the "limbo" of the breakpoint dialogs. Try it yourself to confirm ;)

[user420667]

I believe the expression only gets evaluated when the breakpoint is hit. So in the example of two lines of n = i++ with a breakpoint only on one of them, your breakpoint of n == 3 might not get hit depending on which line you put the breakpoint on and your initial value of i.

[user420667]

Sorry my use of "hit" was a little loose in my last comment as I used it to mean two different things. When the breakpoint is hit (by which I'm going to mean the line it's on gets executed and the expression it contains is evaluated), it won't stop unless the expression evaluates to true. However I don't believe that the expression will be evaluated anytime n changes except when the breakpoint is hit.

[Noumenon]

2016 not supported in Firefox or Chrome.

[David Harkness]

This polyfill for Object.watch works in ES5-compliant browsers (tested in Chrome 51).

[Palec]

Object.prototype.watch() is Firefox-specific. It has been removed in FF 58. Use getters and setters and put debugger statement in them instead.

[user14471901]

2018 - Only in FF and has been depricated, so watch() isn't available anymore, and neiter is a solid alternative in the debuggers itself. Back to old alert box littering (sigh)

[DanteTheSmith]

and we are in 2019 and everyone has deprecated it. They should have left it for debug purposes at least.

[Victor]

In presents days, moderns browsers doesn't provide a watch functions (at least on chrome 79.0.3945.79), instead the recommendation is to proxify the object to watch using defineProperty func (it let you provide hooks methods that gets called on setting and getting over an object's property)

[stravanato]

Very good answer. Thanks for teaching this. For me this is the correct answer.