如何在浏览器中查看所有待执行的setTimeout列表？

好问题！其实有两种靠谱的方式可以查看浏览器中处于等待状态的定时器——一种是用浏览器自带的开发者工具（最省心），另一种是通过代码手动跟踪。下面详细拆解：

主流浏览器（Chrome、Edge、Firefox）的开发者工具都提供了查看定时器的能力，操作大同小异，以Chrome/Edge为例：

• 按下F12或者右键页面选择「检查」打开开发者工具
• 切换到Performance面板（旧版本可能叫「Timeline」）
• 点击左上角的红色录制按钮，等待几秒后再次点击停止录制
• 在录制结果的Timings板块里，就能看到所有待执行的定时器，还能直观看到它们的触发时间、关联的回调函数，甚至能定位到代码位置
• 额外小技巧：如果想在定时器触发时自动断点调试，可以切换到Sources面板，展开左侧的「Event Listener Breakpoints」→「Timers」，勾选setTimeout，这样定时器触发时会自动暂停代码执行

Firefox的操作类似，在Performance面板录制后也能找到定时器相关的时间线，或者在Debugger面板的断点列表里配置定时器断点。

浏览器原生并没有给window对象暴露所有活跃定时器的属性，所以如果需要在代码里随时查看，可以通过重写setTimeout和clearTimeout来自己维护一个定时器列表：

// 用Map存储所有活跃的定时器，键是定时器ID，值是详细信息
const activeTimers = new Map();

// 先保存原生的setTimeout方法
const originalSetTimeout = window.setTimeout;
// 重写setTimeout，每次调用时记录定时器信息
window.setTimeout = function(callback, delay, ...args) {
  const timerId = originalSetTimeout(callback, delay, ...args);
  activeTimers.set(timerId, {
    delay, // 定时器设置的延迟时间
    callback: callback.toString(), // 把回调转成字符串方便查看
    startTime: Date.now() // 定时器创建的时间
  });
  return timerId;
};

// 同步重写clearTimeout，移除已被清除的定时器
const originalClearTimeout = window.clearTimeout;
window.clearTimeout = function(timerId) {
  originalClearTimeout(timerId);
  activeTimers.delete(timerId);
};

// 自定义函数，返回所有活跃定时器的信息，包括剩余等待时间
function getActiveTimers() {
  return Array.from(activeTimers.entries()).map(([id, info]) => ({
    timerId: id,
    remainingTime: Math.max(0, info.delay - (Date.now() - info.startTime)),
    ...info
  }));
}

用法很简单：

• 在页面加载初期就引入这段代码（要在其他调用setTimeout的脚本之前）
• 之后每次调用setTimeout，都会自动被记录到activeTimers里
• 想查看时，直接在控制台输入getActiveTimers()，就能得到所有处于等待状态的定时器列表，包括它们的剩余等待时间

这种方式的优点是灵活，可以自定义需要记录的信息，随时在代码或控制台查看；缺点是如果页面中有其他脚本也重写了setTimeout，可能会出现冲突，需要注意执行顺序。

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