Firebug für Firefox verfügt über eine nette Funktion namens "Bei Eigenschaftsänderung unterbrechen", mit der ich jede Eigenschaft eines Objekts markieren kann und die JavaScript-Ausführung unmittelbar vor der Änderung stoppt.
Ich versuche, dasselbe in Google Chrome zu erreichen, und kann die Funktion im Chrome-Debugger nicht finden. Wie mache ich das in Google Chrome?
javascript
debugging
firefox
google-chrome
firebug
Arsen Zahray
quelle
quelle
Antworten:
Wenn es Ihnen nichts ausmacht, mit der Quelle herumzuspielen, können Sie die Eigenschaft mit einem Accessor neu definieren.
quelle
console.watch(obj, 'someProp')
.window.location
aus Sicherheitsgründen.obj._someProp = obj.someProp;
, es scheint nicht in Bezug auf das, was Sie zu erreichen versuchen (wahrscheinlich, weil ich etwas vermisse)Edit 2016.03:
Object.observe
ist in Chrome 50 veraltet und entferntEdit 2014.05:Object.observe
wurde in Chrome 36 hinzugefügtChrome 36 wird mit einer nativen
Object.observe
Implementierung geliefert, die hier genutzt werden kann:Wenn Sie es nur vorübergehend möchten, sollten Sie den Rückruf in einer Variablen speichern und aufrufen,
Object.unobserve
wenn Sie fertig sind:Beachten Sie, dass Sie bei der Verwendung
Object.observe
nicht benachrichtigt werden, wenn die Zuordnung nichts geändert hat, z. B. wenn Sie geschrieben habenmyObj.a = 1
.Um den Aufrufstapel anzuzeigen, müssen Sie die Option "Asynchroner Aufrufstapel" in den Entwicklungstools aktivieren:
Ursprüngliche Antwort (2012.07):
Eine
console.watch
Skizze wie von @katspaugh vorgeschlagen:Aufruf:
Kompatibilität:
debugger
(oder ist es eine Frage der Konfiguration? Bitte korrigieren Sie mich dann), aber sieconsole.log
funktionieren.Bearbeiten:
Beachten Sie, dass in Firefox
console.watch
bereits vorhanden ist, da Firefox nicht dem Standard entsprichtObject.watch
. Daher können Sie in Firefox nativ auf Änderungen achten:Dies wird jedoch bald (Ende 2017) entfernt .
quelle
oObj[sProp]
, da der Getter eine unendliche Rekursion eingeben würde. Probieren Sie es in Chrome ausRangeError: Maximum call stack size exceeded
.async
Kontrollkästchen bei diesem Ansatz so golden ist: html5rocks.com/de/tutorials/developertools/async-call-stackasync
Kontrollkästchen, wie @cnp schrieb, siehe mein UpdateObject.observe
ist veraltet und wird bald entfernt: siehe: chromestatus.com/features/6147094632988672Hierfür gibt es eine Bibliothek: BreakOn ()
Wenn Sie es auf Chrome Entwickler - Tools als Snippet hinzufügen (Quellen -> Snippets -> Rechtsklick -> Neu -> fügen diese ) , können Sie es jederzeit benutzen.
Öffnen Sie dazu die dev-tools und führen Sie das Snippet aus. Um zu brechen, wann
myObject.myProperty
geändert wird, rufen Sie dies von der Dev-Konsole aus auf:Sie können die Bibliothek auch zum Debug-Build Ihres Projekts hinzufügen, damit Sie nicht
breakOn
jedes Mal erneut aufrufen müssen, wenn Sie die Seite aktualisieren.quelle
Dies kann auch mithilfe des neuen Proxy- Objekts erfolgen, dessen Zweck genau darin besteht: das Abfangen der Lese- und Schreibvorgänge in das vom Proxy umschlossene Objekt. Sie verpacken einfach das Objekt, das Sie beobachten möchten, in einen Proxy und verwenden das neue verpackte Objekt anstelle Ihres ursprünglichen.
Beispiel:
Verwenden Sie nun wrappedObject, wo Sie stattdessen originalObject angeben würden, und untersuchen Sie den Aufrufstapel bei Unterbrechung.
quelle
set
muss zurückkehren,true
damit es nicht für andere als verfolgte Fälle fehlschlägt.quelle
Beschlossen, meine eigene Version dieser Lösung zu schreiben, sie in einem Snippet in den DevTools von Chrome zu speichern und in ein IIFE zu verpacken, das sowohl Node als auch Browser unterstützen soll. Außerdem hat der Beobachter geändert, dass eine Bereichsvariable anstelle einer Eigenschaft für das Objekt verwendet wird, sodass keine Möglichkeit von Namenskonflikten besteht und Code, der Schlüssel auflistet, den neu erstellten "privaten Schlüssel" nicht "sieht":
quelle
In Chrome ist diese Funktion in den neuesten Versionen https://developers.google.com/web/updates/2015/05/view-and-change-your-dom-breakpoints integriert .
Sie brauchen also keine benutzerdefinierten Bibliotheken und Lösungen mehr. Klicken Sie einfach mit der rechten Maustaste auf das DOM-Element im Inspektor und wählen Sie "Unterbrechen" -> "Attributänderungen".
quelle