Jeder der eine größere Anwendung debuggt, wird sich schnell in einer Situation wiederfinden, in der einfache Breakpoints nicht mehr ausreichen um die Ursache des Fehlers zu finden. Die meisten modernen Debugger beherrschen deswegen das Setzen von Watchpoints.
Watchpoints beobachten eine Variable und halten die Ausführung des Programmes an, sobald sich der Wert der Variable ändert. Auch wenn die Entwicklertools der meisten Browser ziemlich fortgeschritten sind, sucht man Watchpoints hier jedoch vergeblich. Glücklicherweise gibt es ein paar Möglichkeiten um dieses Dilemma herumzuarbeiten, indem man die Watchpoints direkt in JavaScript oder der Konsole setzt:
Gecko-basierte Browser wie Firefox bieten die Möglichkeit die Watchpoints mit der Funktion Object.prototype.watch() direkt in der Debugging-Konsole zu setzen.
var someVar = { myProperty: 'foo' };
Object.watch('myProperty', function () {
console.log('myProperty changed!');
});
Chrome besitzt das noch mächtigere Object.observe(), mit dem man beliebige Variablen beobachten kann und nicht nur Member von Objekten.
var someVar = ...
Object.observe(someVar, function () {
console.log('someVar changed!');
});
Für alle anderen Browser gibt es einen Polyfill, der den Objekt-Prototyp mit einer neuen Funktion .watch() erweitert.
Als i-Tüpfelchen kann man nun noch den Debugger halten lassen sobald der gesetzte Watchpoint ausgeführt wird. Hierfür verwendet man im Callback das Statement debugger; welches in nahezu allen Browsern funktioniert.
Object.observe(someVar, function (name, object, type, oldValue) {
debugger;
});
