javascript - lite - firebug para firefox quantum

¿Cómo "romper el cambio de propiedad" en Chrome?

Question

Firebug para Firefox tiene una característica agradable, llamada "Romper en el cambio de propiedad", donde puedo marcar cualquier propiedad de cualquier objeto, y se detendrá la ejecución de JavaScript justo antes del cambio.

Intento lograr lo mismo en google chrome, y no puedo encontrar la función en el depurador de Chrome. ¿Cómo hago esto en google chrome?

Answer 1

Esto también se puede hacer utilizando el nuevo objeto Proxy cuyo propósito es exactamente eso: interceptar las lecturas y escrituras en el objeto envuelto por el Proxy. Simplemente envuelve el objeto que desea observar en un Proxy y utiliza el nuevo objeto envuelto en lugar del original.

Ejemplo:

const originalObject = {property: ''XXX'', propertyToWatch: ''YYY''};
const watchedProp = ''propertyToWatch'';
const handler = {
  set(target, key, value) {
    if (key === watchedProp) {
      debugger;
    }
    target[key] = value;
  }
};
const wrappedObject = new Proxy(originalObject, handler);

Ahora usa wrappedObject donde deberías proporcionar originalObject y examinar la pila de llamadas en el break.

Answer 2

Hay una biblioteca para esto: BreakOn()

Si lo agrega a las herramientas de desarrollo de Chrome como un fragmento (fuentes -> fragmentos de código -> haga clic derecho -> nuevo -> pegar this ) , puede usarlo en cualquier momento.

Para usarlo, abra las herramientas de desarrollo y ejecute el fragmento. Entonces para romper cuando myObject.myProperty se cambia, llama esto desde la consola dev:

breakOn(myObject, ''myProperty'');

También podría agregar la biblioteca a la estructura de depuración de su proyecto para que no tenga que volver a llamar a breakOn cada vez que actualice la página.

Answer 3

Si no te importa jugar con la fuente, puedes redefinir la propiedad con un descriptor de acceso.

// original object
var obj = {
    someProp: 10
};

// save in another property
obj._someProp = obj.someProp;

// overwrite with accessor
Object.defineProperty(obj, ''someProp'', {
    get: function () {
        return obj._someProp;
    },

    set: function (value) {
        debugger; // sets breakpoint
        obj._someProp = value;
    }
});

Answer 4

Editar 2016.03: Object.observe está en desuso y eliminado en Chrome 50

Editar 2014.05: se agregó Object.observe en Chrome 36

Chrome 36 se envía con implementación nativa de Object.observe que se puede aprovechar aquí:

myObj = {a: 1, b: 2};
Object.observe(myObj, function (changes){
    console.log("Changes:");
    console.log(changes);
    debugger;
})
myObj.a = 42;

Si lo desea solo temporalmente, debe almacenar la devolución de llamada en una variable y llamar a Object.unobserve cuando haya terminado:

myObj = {a: 1, b: 2};
func = function() {debugger;}
Object.observe(myObj, func);
myObj.a = 42;
Object.unobserve(myObj, func);
myObj.a = 84;

Tenga en cuenta que al usar Object.observe , no se le notificará cuando la asignación no haya cambiado nada, por ejemplo, si ha escrito myObj.a = 1 .

Para ver la pila de llamadas, debe habilitar la opción "pila de llamadas asincrónicas" en Herramientas de desarrollo:

Respuesta original (2012.07):

Un sketch de console.watch según lo sugerido por @katspaugh:

console = console || {}; // just in case
console.watch = function(oObj, sProp) {
   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;
       }
   });
}

Invocación:

console.watch(obj, "someProp");

Compatibilidad:

• En Chrome 20, ¡puedes pegarlo directamente en Dev Tools en tiempo de ejecución!
• Para completar: en Firebug 1.10 (Firefox 14), debe insertarlo en su sitio web (por ejemplo, a través de Fiddler si no puede editar la fuente manualmente); lamentablemente, las funciones definidas de Firebug no parecen romper el debugger (¿o es una cuestión de configuración? Corrígeme entonces), pero console.log funciona.

Editar:

Tenga en cuenta que en Firefox, console.watch ya existe, debido a Object.watch no estándar de Object.watch . Por lo tanto, en Firefox, puedes ver los cambios de forma nativa:

>>> var obj = { foo: 42 }
>>> obj.watch(''foo'', function() { console.log(''changed'') })
>>> obj.foo = 69
changed
69

Sin embargo, esto será eliminado pronto (finales de 2017) .

Answer 5

function debugProperty(obj, propertyName) {
  // save in another property
  obj[''_'' + propertyName] = obj[propertyName];

  // overwrite with accessor
  Object.defineProperty(obj, propertyName, {
    get: function() {
      return obj[''_'' + propertyName];
    },

    set: function(value) {
      debugger; // sets breakpoint
      obj[''_'' + propertyName] = value;
    }
  });
}