Edit 2016.03: Object.observe
est obsolète et supprimé dans Chrome 50
Edit 2014.05: a Object.observe
été ajouté dans Chrome 36
Chrome 36 est livré avec une Object.observe
implémentation native qui peut être exploitée ici:
myObj = {a: 1, b: 2};
Object.observe(myObj, function (changes){
console.log("Changes:");
console.log(changes);
debugger;
})
myObj.a = 42;
Si vous ne le souhaitez que temporairement, vous devez stocker le rappel dans une variable et appeler une Object.unobserve
fois terminé:
myObj = {a: 1, b: 2};
func = function() {debugger;}
Object.observe(myObj, func);
myObj.a = 42;
Object.unobserve(myObj, func);
myObj.a = 84;
Notez que lors de l'utilisation Object.observe
, vous ne serez pas averti lorsque le devoir n'a rien changé, par exemple si vous avez écrit myObj.a = 1
.
Pour voir la pile d'appels, vous devez activer l'option "Async call stack" dans Dev Tools:
Réponse originale (2012.07):
Un console.watch
sketch comme suggéré par @katspaugh:
var console = console || {}; // just in case
console.watch = function(oObj, sProp) {
var sPrivateProp = "$_"+sProp+"_$"; // to minimize the name clash risk
oObj[sPrivateProp] = oObj[sProp];
// overwrite with accessor
Object.defineProperty(oObj, sProp, {
get: function () {
return oObj[sPrivateProp];
},
set: function (value) {
//console.log("setting " + sProp + " to " + value);
debugger; // sets breakpoint
oObj[sPrivateProp] = value;
}
});
}
Invocation:
console.watch(obj, "someProp");
Compatibilité:
- Dans Chrome 20, vous pouvez le coller directement dans les outils de développement au moment de l'exécution!
- Par souci d'exhaustivité: dans Firebug 1.10 (Firefox 14), vous devez l'injecter dans votre site Web (par exemple via Fiddler si vous ne pouvez pas éditer la source manuellement); malheureusement, les fonctions définies à partir de Firebug ne semblent pas fonctionner
debugger
(ou est-ce une question de configuration? veuillez me corriger alors), mais console.log
fonctionne.
Éditer:
Notez que dans Firefox, console.watch
existe déjà, en raison du non-standard de Firefox Object.watch
. Par conséquent, dans Firefox, vous pouvez surveiller les changements de manière native:
>>> var obj = { foo: 42 }
>>> obj.watch('foo', function() { console.log('changed') })
>>> obj.foo = 69
changed
69
Cependant, cela sera bientôt (fin 2017) supprimé .