如何在 javascript 或 jquery 中获取/查找从 DOM 元素或变量调用的函数答案

【问题标题】：How to get/find the function being called from a DOM element or variable in javascript or jquery如何在 javascript 或 jquery 中获取/查找从 DOM 元素或变量调用的函数
【发布时间】：2014-04-02 03:50:54
【问题描述】：

我不确定如何或是否可以做到这一点。我有一个通过 CMS 创建的页面。有很多文件，即：includes、.LESS 和 .js 文件。根据所选模板，css 规则将aside#socialicons 元素设置为“display:none”。但是，这条规则正在被动态设置在同一元素上的 "display:block" 的内联 css 样式覆盖。

我查看了几个文件（.css, .less 和 .js），试图找出如何动态添加此属性，以便我可以更改它。

在global.js中，一个变量的声明和定义如下：

g = g || {};
g = {
selectors: {
        socialbox: "aside#socialicons",
            ....
}

逐行，我手动查看所有.js 文件以找到g.selector.socialbox 变量。我希望找到操纵它的函数。我还没有找到它。我还查看了选择器 aside#socialicons 的所有 css/less 文件，只能找到将其设置为 display:none;visibility:hidden; 的 css 规则。

告诉我，如果某个函数确实在修改此元素，是否有办法在 Chrome 或 Firebug 的开发者工具控制台中找到正在调用的函数以将 display:block 添加到 aside#socialicons/g.selector.socialbox 元素?断言可以工作吗？如果这些方法中的任何一种都可以工作，请告诉我它是如何完成的？

非常感谢。

更新： 所有 js 文件都已压缩并编译为一个 .js 文件，以获得更好的性能。该页面使用了大约 10 个 javascripts 和 10 个 javascript 库文件。我可以查看源代码以查看正在加载的文件，但由于该元素已使用不同的名称在不同的文件中定义，例如 g.selectors.socialbox 或 g.socialbox，因此尝试跟踪 aside#socialicons 元素是什么变量会让人感到困惑.在 firebug 中，我可以在所有文件中搜索元素和/或变量，但如果变量已被重命名，我会非常迷茫。欢迎所有帮助。这段代码不是我写的。

非常感谢。

【问题讨论】：

标签： javascript jquery css debugging google-chrome-devtools

【解决方案1】：

在开发者工具的Elements 选项卡中，右键单击元素并选择Break on Attribute Modification。然后等待断点命中，您可以检查堆栈跟踪以查看它是从哪里修改的。

【讨论】：

对不起，我给了错误的标签名称，我的意思是元素。
谢谢，巴马尔。我刚刚在这里查了elijahmanor.com/7-chrome-tips-developers-designers-may-not-know
当您选择它时，它会告诉浏览器在该元素被修改时停止。发生这种情况时，它将转到 Sources 选项卡并显示在修改时正在执行的代码。侧边栏中的调用堆栈部分将显示调用历史记录，您可以向下移动堆栈以查找应用程序中导致该调用的函数。
你必须在修改元素之前设置断点，然后等待断点被命中。然后你可以查看调用堆栈，看看程序的哪一部分执行了修改。
在加载的第一个 JS 脚本的开头设置一个常规的源代码断点，这样您就可以在 Javascript 进行任何修改之前检查 DOM 并设置修改断点。

【解决方案2】：

可能最简单的方法是打开 Chrome，然后从调试控制台输入：getEventListeners(object)。它将向您显示附加到该对象的所有事件侦听器以及函数是什么。

参考：https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

祝你好运

【讨论】：

如果正在使用 jQuery，这可能不是很有帮助。一切都只会指向一些通用的 jQuery 方法，而不是应用程序中的函数。
感谢 DondeEstaMiCulo 提供开发者工具 API 的链接参考。这很有帮助，我今天会尝试一下。
@Chris22 乐于助人，祝你好运！

【解决方案3】：

如果找不到g.selector.socialbox，请尝试查找 g.selector 的实例。可能是因为它们是循环遍历g.selector的每一个属性，而不是直接调用g.selector.socialbox。

尝试在 global.js 的不同点设置一些断点。当您逐步浏览它们时，它将让您更好地了解函数调用发生的位置。它们可以通过 Firefox 中的“脚本”选项卡或 Chrome 中的“源”选项卡进行设置。

【讨论】：

谢谢，马特。我还不太擅长如何单步调试代码，除了使用一些教程之外，我还没有做过这种类型的调试，但这绝对是我需要学习更多如何去做的事情。跨度>

【解决方案4】：

克里斯，可能不是最佳答案，但如果不了解相关 CMS，很难回答。

您可以在 JS 中覆盖，但 CSS 会更简单

#divwithinlinestyle { display:block !important; }

【讨论】：

我的意思是 display:none 根据你的问题，但你明白了
谢谢，罗伯。我投票赞成您的答案，因为您的答案为这个问题提供了“快速而肮脏”的解决方案，我可以使用它。虽然我确实想知道如何在使用开发者工具加载页面时找出导致属性更改的原因。