浏览器的“开发人员工具”可以帮助跟踪添加了哪些/哪些点击事件处理程序？

Question

我承担了维护一个网站的责任，这个网站右上角有一对伪按钮（<a标签打扮得像按钮），用于“登录”和“注册”。客户想要更改它以“登录”和“联系我们” - 联系我们是注册的不同页面。

没问题，我认为很容易解决 - 我将<a href="/signup"换成了<a href="/contactus"。指向页面上的按钮会在状态栏中显示正确的URL，但单击该按钮仍会转到注册页面

我因此假设有一个点击事件处理程序正在执行导航，而我正在尝试找出点击事件代码是什么，或者它是如何附加的

Chrome的inspect元素并没有告诉我太多（也许是因为我无法理解） - 在检查按钮（或者上面的DOM层次结构中的任何其他内容）后，我切换到“事件监听器”选项卡，但是我只是在那里得到相同的事件处理程序列表（对于层次结构中的任何DOM元素），我没有看到任何有助于我确定运行的源代码的东西。 Chrome说他们已经链接到all.js - 该文件是430kb的缩小脚本，我不确定它来自哪个网络库，因此“all.js中的第13行”没有多大帮助。 li.sign-up.wide下的树中的任何内容都可以帮我回到点击事件处理代码吗？

Edge / IE也没有太多信息..在这些浏览器中，除了li持有a元素之外，事件侦听器选项卡对于返回DOM根的元素主要是空的，它确实列出了一个click事件，但是这只是链接回all.js中的某个地方 - IE至少告诉我它在第1752行的第2行，但我很难相信这是我想要的代码，因为如上所述all.js只是一大块缩小的脚本。

我搜索了所有源代码（使用标准的Find in Files类型搜索）来查找我能想到的任何相关内容：bind（用于绑定事件的jquery函数），click（事件绑定 - 似乎有时使用jquery.click（）），signup（用户通过点击处理程序发送到的URL），我发现了一些看起来很有希望的事情：

    var bindMiniSignup = function () {

        $('#sign-up-widget .sign-up.wide, #sign-up-widget .sign-up.mobile').bind('click',function(){
            Main.ExpandSignUpForm();
            return false;
        });

        $('#sign-up-widget .log-in.wide, #sign-up-widget .log-in.mobile').bind('click',function(){
            Main.ExpandLogInForm();
            return false;
        });
    } 

这些类和ID名称肯定是指我正在尝试更改的元素：

这个函数bindMiniSignup在不同的地方被调用了几次（例如document.ready），所以我确信这就是我要找的东西。唉，评论功能的主体，以便没有进行绑定对网站没有影响;它仍然像以前一样（清除缓存以确保加载了新的JS）

所以我的问题是;如果您完成了查找和更改元素具有click绑定的PHP或JS文件的任务，您将如何查找单击该元素时调用的代码（或执行该代码的代码）捆绑）？单击此按钮后，有没有办法让浏览器立即中断，所以我可以找到实际的点击处理程序代码，因此我可以搜索所有源代码？

Answer 1

您似乎走在正确的轨道上，但jQuery已经使用on()很长时间来进行事件绑定。

此外，基于绑定事件的文件称为all.js这一事实，您可能需要对源代码执行中间编译或缩小步骤。这可能是您的更改没有任何效果的原因。

检查项目根目录中是否存在任何Grunt，Gulp，Webpack等文件，因为他们会指出使用哪些工具进行编译/预处理。