2

<img id='hitMe' />考虑一个在 jQuery 函数中被引用的元素，$('#hitme').click()或者$(document).on('click', '#hitme'). 除了 grepping 字符串之外，如何在 Javascript 源代码中找到这些函数hitme？考虑到 grepping 是不可行的，因为字符串可能有任意大量的引用，并且可能有大量导入的 Javascript 文件。

也许有一种方法可以让 Firebug 进入在页面加载后逐行运行的 Javascript 函数？考虑到我不知道在哪里设置断点，因为我不知道运行哪个函数。

4

4 回答 4

1

Chrome 或 Chromium 可以在这方面为您提供帮助。右键单击您要探索的元素，选择“检查元素”，查看以“计算样式”、“样式”开头的右侧面板......在它的底部你会找到该部分“事件侦听器”，它为您提供有关侦听哪些事件以及在代码中附加它的位置的信息。

于 2013-02-05T10:21:21.250 回答
1

我推荐 Visual Event 小书签。接下来是该网站的无耻复制粘贴：

Visual Event 是一个开源 Javascript 小书签，它提供有关已附加到 DOM 元素的事件的调试信息。视觉事件显示：

  • 哪些元素附加了事件
  • 附加到元素的事件类型
  • 将与事件一起运行的代码被触发
  • 定义附加函数的源文件和行号（仅限 Webkit 浏览器和 Opera）

http://www.sprymedia.co.uk/article/Visual+Event+2

于 2013-02-05T10:35:54.810 回答
1

尝试以下操作（我正在使用 Chrome/Chrome 开发工具）：

  1. 用类似的东西覆盖 jQuery 的 on/click 函数：

    var old = $.fn.on; $.fn.on = function() { console.log('called on'); debugger; old.apply(this, arguments);}

  2. 现在，对 .on() 的每个调用都应该通过您（同步）并在“调试器”处暂停；陈述。

  3. 暂停后，在“调用堆栈”下查找并找到您要查找的函数（例如调用 .on() 的函数）。您还可以在上面的覆盖函数中添加一些条件，以确保不是每次调用 .on() 都会暂停。

Chrome 开发工具 - 脚本已暂停

于 2014-05-07T12:12:08.807 回答
1

这是一个捕获事件触发（调度）的时刻而不是添加侦听器的时刻（on/click）的解决方案。

它可以通过覆盖来完成jQuery.event.dispatch。例如：

(function($){
    var old = $.event.dispatch;
    $.event.dispatch = function(event){
        if(event.type=='click'){
            var handlers = ( $._data( this, "events" ) || {} )[ event.type ] || [];
            console.log('handlers', handlers[0]);
        }
        old.apply(this, arguments);
    };
})(jQuery);

在此示例中，我选择将函数的内容打印到控制台，但也可以像 Omri Sivan建议的那样调试它，使用debugger;. 使用 Chrome，您应该能够右键单击该功能以“显示功能定义”。

于 2014-05-08T08:39:02.510 回答