Ponto de interrupção na alteração de propriedade

O Firebug for Firefox possui um recurso interessante, chamado "Interromper na alteração de propriedade", onde eu posso marcar qualquer propriedade de qualquer objeto e interromperá a execução do JavaScript antes da alteração.

Estou tentando obter o mesmo no Google Chrome e não consigo encontrar a função no depurador do Chrome. Como faço isso no Google Chrome?

Se você não se importa de mexer com a fonte, pode redefinir a propriedade com um acessador.

// 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;
    }
});

Editar 2016.03: Object.observefoi descontinuado e removido no Chrome 50

Editar 2014.05: Object.observefoi adicionado no Chrome 36

O Chrome 36 é enviado com Object.observeimplementação nativa que pode ser aproveitada aqui:

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

Se você desejar apenas temporariamente, armazene o retorno de chamada em uma variável e ligue Object.unobservequando terminar:

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

Observe que, ao usar Object.observe, você não será notificado quando a tarefa não mudar nada, por exemplo, se você tiver escrito myObj.a = 1.

Para ver a pilha de chamadas, você precisa habilitar a opção "pilha de chamadas assíncronas" nas Ferramentas de Desenvolvimento:

Resposta original (2012.07):

Um console.watchesboço sugerido por @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;
       }
   });
}

Invocação:

console.watch(obj, "someProp");

Compatibilidade:

• No Chrome 20, você pode colá-lo diretamente no Dev Tools em tempo de execução!
• Para ser completo: no Firebug 1.10 (Firefox 14), você deve injetá-lo em seu site (por exemplo, via Fiddler, se você não pode editar a fonte manualmente); infelizmente, as funções definidas no Firebug parecem não funcionar debugger(ou é uma questão de configuração? por favor me corrija), mas console.logfunciona.

Editar:

Observe que no Firefox console.watchjá existe, devido ao não padrão do Firefox Object.watch. Portanto, no Firefox, você pode observar as alterações de forma nativa:

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

No entanto, isso será removido em breve (final de 2017) .

Existe uma biblioteca para isso: BreakOn ()

Se você adicioná-lo às ferramentas de desenvolvimento do Chrome como um snippet (fontes -> snippets -> clique com o botão direito do mouse -> novo -> cole este ) , poderá usá-lo a qualquer momento.

Para usá-lo, abra o dev-tools e execute o snippet. Para interromper quando myObject.myPropertyfor alterado, chame isso no console do desenvolvedor:

breakOn(myObject, 'myProperty');

Você também pode adicionar a biblioteca à compilação de depuração do seu projeto para não precisar ligar breakOnnovamente sempre que atualizar a página.

Isso também pode ser feito usando o novo objeto Proxy, cujo objetivo é exatamente o seguinte: interceptar as leituras e gravações no objeto envolvido pelo Proxy. Você simplesmente quebra o objeto que gostaria de observar em um Proxy e usa o novo objeto quebrado em vez do original.

Exemplo:

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

Agora use wrapObject onde você forneceria originalObject e examine a pilha de chamadas no intervalo.

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;
    }
  });
}

Decidi escrever minha própria versão desta solução, salve-a em um trecho no DevTools do Chrome e envolva-a em um IIFE que deve oferecer suporte a nós e navegadores. Também mudou o observador para usar uma variável de escopo em vez de uma propriedade no objeto, de modo que não haja possibilidade de conflitos de nomes, e qualquer código que enumere chaves não "verá" a nova "chave privada" criada:

(function (global) {
  global.observeObject = (obj, prop) => {
    let value

    Object.defineProperty(obj, prop, {
      get: function () {
        return value
      },

      set: function (newValue) {
        debugger
        value = newValue
      },
    })
  }
})(typeof process !== 'undefined' ? process : window)

O Chrome tem esse recurso incorporado nas versões mais recentes https://developers.google.com/web/updates/2015/05/05/view-and-change-your-dom-breakpoints .

Portanto, não há mais necessidade de bibliotecas e soluções personalizadas, basta clicar com o botão direito do mouse no elemento DOM no inspetor e escolher 'Interromper' -> 'modificações de atributos' e pronto.