Point d'arrêt sur changement de propriété

Question

Firebug pour Firefox dispose d'une fonctionnalité intéressante, appelée "Break on property change", qui me permet de marquer n'importe quelle propriété de n'importe quel objet et d'arrêter l'exécution du JavaScript juste avant le changement.

J'essaie de réaliser la même chose dans Google Chrome, et je ne trouve pas la fonction dans le débogueur de Chrome. Comment puis-je faire cela dans Google Chrome ?

Answer 1

J'ai décidé d'écrire ma propre version de cette solution, de la sauvegarder dans un snippet dans les DevTools de Chrome, et de l'envelopper dans un IIFE qui devrait supporter à la fois Node et les navigateurs. J'ai également modifié l'observateur pour utiliser une variable de portée plutôt qu'une propriété de l'objet, de sorte qu'il n'y a aucune possibilité de conflit de noms et que tout code qui énumère les clés ne "verra" pas la nouvelle "clé privée" qui est créée :

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

Answer 2

En s'appuyant sur l'excellente solution d'Alexandos Katechis, voici une version du snippet qui ne perturbe pas la valeur originale de la propriété. Je l'ai renommé pour mieux correspondre à ce que je pense quand je l'utilise.

Utilisation :

1. Ajouter le snippet via Sources -> Snippets
2. Au besoin, appuyez sur Command-O et choisissez d'exécuter le snippet breakOnChange
3. Appelez breakOnChange(anyObject, 'propertyName') dans la console
4. Entreprendre l'action qui provoque le changement
5. S'arrête dans le débogueur

Cela est très utile pour repérer des choses comme une bibliothèque globale telle que jQuery piétinée par un script tiers.

(function (global) {
  global.breakOnChange = (obj, prop) => {
    let value = obj[prop]

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

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

Answer 3

Cette fonctionnalité est intégrée dans les dernières versions de Chrome https://developers.google.com/web/updates/2015/05/view-and-change-your-dom-breakpoints .

Plus besoin de bibliothèques et de solutions personnalisées, il suffit de cliquer avec le bouton droit de la souris sur l'élément DOM dans l'inspecteur et de choisir 'Break on' -> 'attribute modifications' et le tour est joué.