如何追踪DOM元素聚焦？

前端开发过程中，我们常常会遇到一些需要通过 JS 来控制 DOM 元素焦点的场景，比如对话框自动聚焦、表单元素聚焦、自定义下拉列表项自动聚焦等等，有的时候会出现焦点位置错误，比如可能先在预想的DOM节点上聚焦，然后立马又被其它元素抢占，这时候如果使用开发者工具加断点调试问题，就很可能因为开发者工具在断点处会抢占系统焦点而无法重现问题。

今天分享一个工具函数，可以在焦点被切换时在控制台输出堆栈信息，同时记录聚焦的DOM元素顺序。通过这种操作就可以根据堆栈信息定位问题代码：

if(process.env.DEBUG) {
  window.focusStack = [];
  window.unobserveFocus = () => {};
  window.observeFocus = () => {
      window.unobserveFocus();
      
      document.addEventListener('focus', onfocus, true);

      function onfocus() {
          console.trace(document.activeElement);
          const last = window.focusStack[focusStack.length - 1];
          if(last !== document.activeElement) {
              window.focusStack.push(document.activeElement);
          }
      }
      window.unobserveFocus = () => {
          document.removeEventListener('focus', onfocus, true)
      };
  };
}

用法：

// 开始监听元素聚焦
observeFocus();
// 取消监听
unobserveFocus();
// 控制台查看聚焦的元素顺序
window.focusStack;