查找更改特定 css 属性的 javascript 代码答案

【问题标题】：find javascript code that changes particular css properties查找更改特定 css 属性的 javascript 代码
【发布时间】：2014-06-09 18:23:10
【问题描述】：

我正在尝试在包含大量 .js 文件的网站上调试一些样式问题。其中一个脚本在点击时将一些 css 属性添加到输入元素。

有没有一种简单的方法可以使用 Chrome 开发者工具找到哪个脚本以及它的哪个部分改变了这些 css 属性？

Chrome 版本 34.0.1847.116

【问题讨论】：

你能分享小提琴或任何其他链接吗？
我不会认为在这种情况下小提琴会有所帮助，因为这是一个非常普遍的问题......它适用于任何有 js 影响 css 属性的网站，对吧？
如果添加的样式足够独特，您可以在代码库中搜索样式中的一些独特字符串，以显着缩小搜索范围，甚至直接找到该行。如果样式修改了元素上的内联style 属性，您可能还可以通过右键单击开发工具Elements 窗格中的元素并选择Break on... 来获取动态断点>Attributes Modification。如果调用堆栈确实遇到断点以找到您自己的代码（而不是负责实际样式更改的任何潜在库代码），您可能必须查找调用堆栈。
宾果游戏，“右键单击开发工具元素窗格中的元素，然后选择 Break on... > Attributes Modification”正是我正在寻找的...如果您将其发布为答案它将被接受;)

【解决方案1】：

在“元素”面板中，右键单击相关元素，然后在上下文菜单中选择 Break on... > Attributes Modifications。下次更改其style 属性时，调试器将在相应的JS 行中断。

【讨论】：

【解决方案2】：

使用开发者工具删除在点击时发生变化的元素。然后单击触发更改的元素。由于无法更改，因此会发出错误。该错误将在右侧有一个链接，以显示它的确切位置。

这应该会产生准确的文件和函数/脚本。

所以说这是你的元素<div class="bob">Apple</div>，点击时，Js 通过删除 .bob 添加style="color:red;"，你会破坏脚本。

注意：使用开发者工具将其删除。这样它就不会永久性地干扰您的项目。

注意 2：在删除它之前，请尝试编辑它并更改它的 id 和/或类，如“xxbob”，这样代码将不再识别它。

【讨论】：

这可能行不通。例如，如果在处理程序中查询已删除的目标元素（而不是在处理程序外部并使用处理程序的闭包来访问它），而没有找到它会返回一个空节点列表，那么可能不会出现错误，因为 CSS 更改只会作用于空节点列表并且什么都不做。还是值得一试的。
你是对的，删除目标元素不会导致错误。不过值得一试。
是 jquery 吗？您可能会删除指向 jquery 文件的链接，然后触发它会发出错误，因为它没有功能。