If you website contains Angular apps which do not have URL fragments and you want to measure form steps or AB-test this application, what to do?
Modern browsers provide a nice function called MutationObserver() that watches the DOM for you for changes.
Maybe this script will help you determine when the application is changing itself.
You can run this javascript snippet in your console and it will display detected changes and log these in the console.
$( document ).ready(function() { // jQuery required
console.log("Start watching changes");
var target = document.body;
var changeCount = 0;
// config object
var config = {
childList: true,
subtree: true
};
// subscriber function
window.changeSeen = true;
function subscriber(mutations) {
for(i=0;i<mutations.length;i++){
// handle mutations here
mutation = mutations[i];
console.log("ChangeSeen: " + changeSeen);
if(window.changeSeen){
changeCount++;
console.log("Something changed : " + changeCount);
window.changeSeen = false;
// If multiple changes happen at once see it as one within half a second
setTimeout("window.changeSeen = true;console.log('Reset changeSeen: ' + window.changeSeen)",500);
// Place your code for changes here!
//setTimeout("console.log('Wait for elements to be rendered by the change');",100);
}
break;
};
}
// instantiating observer
var observer = new MutationObserver(subscriber);
// observing target
observer.observe(target, config);
});