By user420667

2011-10-27 00:56:25 8 Comments

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.


@paulsm4 2011-10-27 01:20:30

You don't even need an IDE - you can use "":

Object.Watch Tutorial

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


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.

@user420667 2011-10-27 16:19:42

+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 :‌​/…

@GuruM 2013-04-09 12:53:03

Haven't been able to try it out but as the link above specifies using setter/getter methods may be a better approach:…

@Noumenon 2016-04-02 19:45:47

2016 not supported in Firefox or Chrome.

@David Harkness 2016-06-15 00:11:18

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

@Palec 2018-04-24 17:37:54 is Firefox-specific. It has been removed in FF 58. Use getters and setters and put debugger statement in them instead.

@Minok 2018-06-19 18:31:03

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 2019-10-01 23:09:46

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

@Victor 2019-12-13 15:32:53

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)

@rainabba 2013-09-27 02:39:55

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

Just include the .js file, then call:'someProperty', function() { 
    console.write('this too'); 
    alert('Object Changed'); //etc 

@Joncom 2013-10-23 21:53:43

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 2013-10-24 23:16:15

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 2013-10-24 23:35:53

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

@Michael 2015-06-19 16:34:04

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.

@Pere 2015-09-23 12:17:36

I don't know if I misunderstood your question. If you want to watch an expression and stop when it reaches a certain value while in a js debugging session in Chrome Developer Tools, it's rather trivial.

You can simply put a breakpoint on the line where the value you want to check is, then click with right mouse button on it and select "Edit breakpoint...". A dialog will pop up prompting for an expression, where execution will stop when its value its true.

For instance, let's say you have a loop and you are adding one unit to a variable inside it and want to stop execution when the variable equals to 3. The expression in loop would look like this:

n = i++;

You must set your breakpoint on that line and the expression to watch (after prompted by "Edit breakpoint...") would be n == 3. When running your code it will stop there when your variable reaches that value.

You'll notice your condition is set because your breakpoint turns orange instead of blue.

@user420667 2015-09-24 00:24:34

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 2015-09-24 01:00:16

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 2015-09-24 05:31:38

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 2015-09-24 20:22:25

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.

Related Questions

Sponsored Content

24 Answered Questions

[SOLVED] Check if a variable is a string in JavaScript

  • 2010-10-30 14:36:34
  • Olical
  • 1413746 View
  • 1734 Score
  • 24 Answer
  • Tags:   javascript

26 Answered Questions

[SOLVED] What is the scope of variables in JavaScript?

52 Answered Questions

30 Answered Questions

[SOLVED] How can I determine if a variable is 'undefined' or 'null'?

32 Answered Questions

[SOLVED] How can I change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2584596 View
  • 2773 Score
  • 32 Answer
  • Tags:   javascript html dom

46 Answered Questions

[SOLVED] Sort array of objects by string property value

32 Answered Questions

[SOLVED] Short circuit Array.forEach like calling break

  • 2010-04-14 21:57:31
  • Scott Klarenbach
  • 1060985 View
  • 1566 Score
  • 32 Answer
  • Tags:   javascript arrays

26 Answered Questions

[SOLVED] Set a default parameter value for a JavaScript function

73 Answered Questions

[SOLVED] How can I get query string values in JavaScript?

54 Answered Questions

Sponsored Content