I have two Chrome windows open on my computer, one on the left and one on the right.
The window on the left has a website open that has the element:
<p id="new_coin">Bytecoin</p>
The window on the right side has another website open that has the element:
<p id="update_coin">Bytecoin</p>
These elements change in real time and I want to monitor, using the console in each window, what delay there is between changing the value of the site on the left and changing the value of the site on the right.
Monitoring and printing when there is a change I know how to do, as shown below, but I don’t know how to make the two consoles talk to each other so that the left console sends the time of the last change and the right console can get that time and when its element is changed, print the time difference.
How can I make this possible?
const targetNode = document.getElementById('new_coin');
const config = { childList: true, subtree: true };
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log(new Date().toLocaleTimeString());
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);