0

My javascript code is encapsulated in an immediately invoked function like this :

(function($){
    var myVar;

    ... Some code
})(jquery)

I want to watch the variable myVar using Chrome debugger.

And see the changes when refreshing the watcher at any time.

bokan
  • 3,601
  • 2
  • 23
  • 38

2 Answers2

0

put a break point on it, when chrome stops you should be able to right click or manually add it to the watch list.

you can also print it to the output screen using 

console.log(myVar);

NOTE: this the var will loose scope once the function is complete. if you want to keep the var after the function is done you need to move it out of the function.

var myVar;
(function($){
    myVar = "somthing with some code"
    ... Some code
})(jquery)

hope this helps

workabyte
  • 3,496
  • 2
  • 27
  • 35
  • Thanks but it does not work. You can see the value when the debugger is paused but it does not update when refreshing the watcher later. Which is what the watcher is made for. – bokan May 16 '14 at 14:18
  • 1
    @bokan that is likley because it looses scope, look at my example where i take the myVar out of the function so it stays in memory. – workabyte May 16 '14 at 14:22
  • Sorry, I copy pasted the same comment as above and it does not apply to your answer. Making the var global is exactly what I want to avoid. The var is in memory because all the code around it is running. It seems like the watcher can only display vars that are children of window. – bokan May 16 '14 at 14:25
  • So you want the value available Outside the function, but you won't move the var outside the function? You simply cannot have both. That is how scoping is designed to work. – Duane May 16 '14 at 14:48
  • I understand how scoping works and I don't want ot access this var form javascript or console. I just want the debugger to show the data that is in ram. The object still exist and I can display it in page using $("#someDiv").text(myVar); from within the function and it refreshes well. It should be possible for the watcher to keep the reference to this object and refreshing it. – bokan May 16 '14 at 15:24
0

You can put debugger; as the first line of the anonymous function and it will stop execution so you can step through it. It will appear in locals, or you can right click and add watch.

(function($){
    debugger;
    var myVar;

    //Code ....
})(jQuery)

See Here: http://jsfiddle.net/jTc76/

To see the test function please ensure the Developer console is up.

Duane
  • 4,460
  • 1
  • 25
  • 27
  • Thanks but it does not work. You can see the value when the debugger is paused but it does not update when refreshing the watcher later. Which is what the watcher is made for. – bokan May 16 '14 at 14:18
  • So myVar is undefined outside the scope of the anonymous function, so the watcher is not broken, it is working exactly as expected. If you need to value accessible outside this function you need to move the declaration outside the anonymous function. var myVar; (function($){ ... – Duane May 16 '14 at 14:45