控制台如何断开自执行函数包裹的MutationObserver实例

• 在控制台运行了基于MutationObserver编写的DOM监听脚本，逻辑包裹在自执行函数（IIFE）中避免全局变量冲突，功能包括提取指定div内的数值做累计求和、在页面挂载自定义元素。
• 受限于IIFE的作用域隔离，脚本内创建的observer实例无法被全局访问，直接在控制台执行observer.disconnect()会报变量未定义错误。
• 现有脚本鲁棒性不足，遇到页面结构差异时会出现求和结果错误、元素挂载位置异常的问题，目前只能通过刷新/登出页面重新粘贴脚本恢复，需要无需刷新页面即可断开已有Observer连接的方案。

问题附带的简化代码如下：

(function () {  
    const targetNode = document.querySelector('div.content')
    const observerOptions = { childList: true, attributes: false, subtree: false }
    const callback = function (mutationsList, observer) {
      for (const mutation of mutationsList) {
        if (mutation.removedNodes.length > 0 && (mutation.removedNodes[0].classList.contains('some-view'))) {
            // 业务逻辑省略
        }
        if (mutation.addedNodes.length > 0 && (mutation.addedNodes[0].classList.contains('some-view'))) {
            // 业务逻辑省略
        }
      }
    }
  
    const observer = new MutationObserver(callback)
    observer.observe(targetNode, observerOptions)
  })()

分两种场景处理：

场景1：后续重新运行脚本时提前做改造（推荐） #

只需要在IIFE内部将断开Observer的方法挂载到全局对象即可，不会暴露其他内部变量，几乎不造成全局污染，后续需要断开时直接调用全局方法即可。
改造后的代码示例：

(function () {  
    const targetNode = document.querySelector('div.content')
    const observerOptions = { childList: true, attributes: false, subtree: false }
    const callback = function (mutationsList, observer) {
      for (const mutation of mutationsList) {
        if (mutation.removedNodes.length > 0 && (mutation.removedNodes[0].classList.contains('some-view'))) {
            // 业务逻辑省略
        }
        if (mutation.addedNodes.length > 0 && (mutation.addedNodes[0].classList.contains('some-view'))) {
            // 业务逻辑省略
        }
      }
    }
  
    const observer = new MutationObserver(callback)
    observer.observe(targetNode, observerOptions)
    // 挂载全局控制方法
    window.disconnectMyObserver = () => observer.disconnect()
  })()

需要断开时直接在控制台执行disconnectMyObserver()即可生效。

场景2：已经运行了未做改造的旧脚本，需要即时断开 #

浏览器没有提供官方API枚举页面中所有已注册的MutationObserver实例，可根据实际情况选择以下两种方法：

• DevTools内置API方法（Chrome/Edge等Chromium内核浏览器可用）
  控制台执行以下代码即可拿到监听目标节点的Observer实例并断开：

  const target = document.querySelector('div.content')
  const observerEntry = getEventListeners(target).mutation?.[0]
  if (observerEntry) observerEntry.observer.disconnect()
  

  getEventListeners是DevTools控制台专属API，仅在开发者工具环境下可用，不会影响页面线上逻辑。

• 节点替换兜底方案（全浏览器兼容）
  如果上述方法失效，可以通过克隆替换监听目标节点的方式，让所有绑定在原节点上的MutationObserver监听自动失效：

  const target = document.querySelector('div.content')
  const clonedTarget = target.cloneNode(true)
  target.parentNode.replaceChild(clonedTarget, target)
  

  注意：该方法会同时清除原节点上绑定的所有事件监听器、其他Observer实例，替换完成后需要重新给新节点绑定所需业务逻辑。

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