如何通过JS或jQuery追踪DOM修改，定位未知样式属性变更来源

• 方法1：使用DOM属性修改断点（最通用）
  1. 打开Chrome DevTools的「Elements」面板，定位到被添加height属性的目标元素
  2. 右键点击该元素，依次选择 Break on > Attribute modifications
  3. 触发修改操作（如果是页面加载时自动修改，刷新页面即可），JS会在属性被修改的瞬间暂停执行
  4. 查看DevTools右侧「Call Stack」面板，跳过jQuery、React等第三方框架的底层调用，上层的业务代码就是修改属性的来源

  注意：如果目标元素会被删除后重建，DOM断点会失效，推荐使用下方拦截方案

• 方法2：拦截jQuery的css方法（适配jQuery项目）
  如果项目使用jQuery修改样式，可以在DevTools的「Console」面板运行以下代码，触发修改时会自动打印调用栈：

  const originalCss = $.fn.css;
  $.fn.css = function(prop, value) {
    if (prop === 'height' || (typeof prop === 'object' && Reflect.has(prop, 'height'))) {
      console.trace('height属性被修改', {修改元素: this[0], 传入参数: [prop, value]});
    }
    return originalCss.apply(this, arguments);
  }
  

• 方法3：原生API级别的拦截（适配所有场景）
  不管使用什么框架，只要是给元素的style.height赋值都会触发拦截，替换代码里的目标元素选择器即可：

  // 替换为你的目标元素选择器
  const targetEl = document.querySelector('.div');
  const heightSetter = Object.getOwnPropertyDescriptor(CSSStyleDeclaration.prototype, 'height').set;
  Object.defineProperty(targetEl.style, 'height', {
    set(v) {
      console.trace('height属性被原生API修改', {'新值': v});
      heightSetter.call(this, v);
    }
  });
  

• 方法4：使用Performance面板排查异步/延迟修改
  如果是延迟加载、动画、异步请求触发的修改，可以按以下步骤操作：
  1. 打开DevTools的「Performance」面板，点击录制按钮
  2. 刷新页面或者触发修改的前置操作，等属性修改完成后停止录制
  3. 在录制结果中搜索style或height关键字，查看样式重计算的上游调用栈即可定位来源

排查小提示：如果确认业务代码没有相关修改，可打开浏览器隐身窗口访问测试，排除浏览器扩展的注入修改。

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