如何利用Chrome控制台监测两个网页元素更新的时间差？

针对你需要监测两个Chrome窗口中元素更新延迟的需求，以下是两种可直接实现的同源窗口通信方案（需确保两个窗口的网页协议、域名、端口完全一致）：

方案一：Broadcast Channel API（推荐） #

Broadcast Channel是浏览器提供的专门用于同源上下文（窗口、标签页、iframe）之间通信的API，用法简洁直接。

左侧窗口控制台代码 #

const targetNode = document.getElementById('new_coin');
const config = { childList: true, subtree: true };
// 创建同名广播频道
const coinChannel = new BroadcastChannel('coin_update_channel');

const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            const currentTimestamp = Date.now();
            console.log('左侧更新时间:', new Date(currentTimestamp).toLocaleTimeString());
            // 发送时间戳到广播频道
            coinChannel.postMessage({
                type: 'left_update',
                timestamp: currentTimestamp
            });
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

右侧窗口控制台代码 #

const targetNode = document.getElementById('update_coin');
const config = { childList: true, subtree: true };
// 监听同一个广播频道
const coinChannel = new BroadcastChannel('coin_update_channel');
let leftLastUpdateTimestamp = null;

// 接收左侧发送的时间戳
coinChannel.onmessage = function(e) {
    if (e.data.type === 'left_update') {
        leftLastUpdateTimestamp = e.data.timestamp;
        console.log('收到左侧更新时间:', new Date(leftLastUpdateTimestamp).toLocaleTimeString());
    }
};

const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            const rightCurrentTimestamp = Date.now();
            console.log('右侧更新时间:', new Date(rightCurrentTimestamp).toLocaleTimeString());
            
            if (leftLastUpdateTimestamp) {
                const delayMs = rightCurrentTimestamp - leftLastUpdateTimestamp;
                console.log('左侧到右侧更新延迟:', `${delayMs}ms`);
            } else {
                console.log('未收到左侧更新时间，无法计算延迟');
            }
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

方案二：localStorage + Storage事件 #

利用localStorage的跨窗口同步特性，通过监听storage事件实现数据传递。

左侧窗口控制台代码 #

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') {
            const currentTimestamp = Date.now();
            console.log('左侧更新时间:', new Date(currentTimestamp).toLocaleTimeString());
            // 将时间戳存入localStorage
            localStorage.setItem('left_coin_update_time', currentTimestamp.toString());
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

右侧窗口控制台代码 #

const targetNode = document.getElementById('update_coin');
const config = { childList: true, subtree: true };
let leftLastUpdateTimestamp = null;

// 监听localStorage变化
window.addEventListener('storage', function(e) {
    if (e.key === 'left_coin_update_time') {
        leftLastUpdateTimestamp = parseInt(e.newValue);
        console.log('收到左侧更新时间:', new Date(leftLastUpdateTimestamp).toLocaleTimeString());
    }
});

// 初始化时读取已存储的时间（防止右侧先打开）
const storedTime = localStorage.getItem('left_coin_update_time');
if (storedTime) {
    leftLastUpdateTimestamp = parseInt(storedTime);
    console.log('初始化读取左侧更新时间:', new Date(leftLastUpdateTimestamp).toLocaleTimeString());
}

const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            const rightCurrentTimestamp = Date.now();
            console.log('右侧更新时间:', new Date(rightCurrentTimestamp).toLocaleTimeString());
            
            if (leftLastUpdateTimestamp) {
                const delayMs = rightCurrentTimestamp - leftLastUpdateTimestamp;
                console.log('左侧到右侧更新延迟:', `${delayMs}ms`);
            } else {
                console.log('未收到左侧更新时间，无法计算延迟');
            }
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

注意事项 #

1. 两个窗口的网页必须同源（协议、域名、端口完全一致），否则上述方案无法生效。
2. 两种方案都会自动覆盖最新的时间戳，确保每次计算都使用最近的左侧更新时间。

内容的提问来源于stack exchange，提问作者Digital Farmer