如何在 Firebug 中找到哪个 JavaScript 函数更改了 CSS？答案

【问题标题】：How to locate in Firebug which JavaScript Function changed the CSS?如何在 Firebug 中找到哪个 JavaScript 函数更改了 CSS？
【发布时间】：2013-11-24 18:19:02
【问题描述】：

Firebug 可能是最好的调试工具，可以让开发人员的工作变得轻松。但是我不知道的一件事是你如何找到改变 CSS 值的函数。在右侧面板中，当您单击任何 CSS 规则时，它将选择左侧的 HTML 节点，您会知道这些值属于该 HTML 元素。

有什么方法可以让您找到修改了 CSS 的 javascript 函数。这在萤火虫中显示为

element.style{
  color:#898980;
  top:78px;
  bottom:121px;

}

我需要找出哪个 JS 函数更改了上述值，因为它不在我的 CSS 中。

下图中突出显示的那个

【问题讨论】：

我建议使用断点来单步执行 JavaScript 源代码。
大约 20 个 js 文件中有 1000 行 JS 行。需要知道在哪里放置断点。很难在没有任何想法的情况下在任何 js 文件上放置断点，即该特定 js 文件将更改 CSS。
对于 Firefox，您可以使用 Object.prototype.watch 或突变观察者来监听相关元素的样式属性的更改，此时您可能能够触发堆栈跟踪希望能提供一些关于导致元素更改的原因的见解。
你可以使用MutationObserver (developer.mozilla.org/en-US/docs/Web/API/MutationObserver) 来创建调试代码，它会对DOM元素的变化做出反应。
见stackoverflow.com/questions/2844565/…

标签： javascript html css debugging firebug

【解决方案1】：

在 HTML 面板中，在样式已更改的元素上：右键单击 => 属性更改时中断。

每次更改此元素的属性时都会中断。

另请参阅：http://www.softwareishard.com/blog/firebug/firebug-tip-break-on-html-mutation/

弗洛伦特

【讨论】：