Question

Break points on User Defined object properties in javascript

Hello

Is there is any JavaScript debugging tool or addon that helps to put break points on
User Defined object properties.

Eg:

I have a JavaScript Object Literal


var TextBox = {
color:"gray",
size:"100px",
border:true
}


Here is my code that does the modification


function foo(){
TextBox["color"] = "blue";
}


I am looking for putting a breakpoint on TextBox.color so that when the property is modified I could find
who is doing the modification or which function does the alteration.

It should also break when

TextBox.color = null;
or
delete TextBox.color;


Is this feature already available in firebug or chrome developer tool?

I have already seen breakpoints for html element removal , attribute modification
but not for user defined object properties.

Thanks.

Answer 1

Have a look at the magic getters and setters that some browsers support:
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

You should be able to define a setter and put a breakpoint in it.

Probably best to keep these out of production code for compatibility reasons, but they’re the only practical way to debug certain problems.