如何定位是哪个第三方JavaScript代码注入HTML并修改页面标签？

• 用浏览器开发者工具的DOM断点锁定触发点
  打开F12开发者工具，找到被修改的目标标签，右键选「Break on」→「Subtree modifications」（改子元素/内容时用）或「Attribute modifications」（改属性时用）。刷新页面后，标签被修改的瞬间调试器会自动暂停，此时看调用栈就能顺着找到执行修改的代码文件，不管是本地还是第三方的都能直接定位。

• 用MutationObserver加调用栈追踪
  在控制台粘贴这段自定义代码（把被修改的选择器换成实际标签的CSS选择器）：

  const target = document.querySelector('被修改的选择器');
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => console.trace('标签被修改了'));
  });
  observer.observe(target, { attributes: true, childList: true, subtree: true });
  

  执行后，标签每次被修改都会在控制台输出完整调用栈，顺着栈就能找到对应的JS文件和代码行。

• 逐个禁用第三方JS排查
  去开发者工具的「Network」面板，找到所有第三方域名的JS文件，右键选「Block request domain」禁用整个域名的请求。每次禁用一个后刷新页面，看标签是否还被篡改，逐步缩小范围锁定可疑文件。

• 监控常用DOM操作方法
  有些第三方脚本会通过重写document.write、innerHTML这类方法来修改DOM，你可以在控制台替换这些方法并加日志追踪：

  // 监控document.write
  const originalWrite = document.write;
  document.write = function(...args) {
    console.trace('document.write被调用');
    return originalWrite.apply(this, args);
  };
  
  // 监控innerHTML
  const originalInnerHTML = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'innerHTML').set;
  Object.defineProperty(HTMLElement.prototype, 'innerHTML', {
    set: function(value) {
      console.trace('innerHTML被修改');
      return originalInnerHTML.call(this, value);
    }
  });
  

  这样只要有代码调用这些方法修改标签，控制台就会输出调用栈，直接找到来源。

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