使用Chrome，如何查找点击后触发的点击事件？

Question

我知道我可以使用以下建议暂停点击：

Using Chrome, how to find to which events are bound to an element

但是当我遵循这个建议时，我发现在踩了20次之后我仍然没有得到我的源代码。我仍然在浏览各种跟踪文件和jQuery文件。

有没有更快的方法来查找点击时触发哪些点击事件？也许可以跳过所有不是我源代码的文件？

Answer 1

你可以黑盒子库或你不关心的其他脚本。

这意味着调试器将忽略这些脚本并“跳过”它们。

当使用DevTools（“源”选项卡）单步执行代码时，右键单击调试器暂停的（例如）jQuery代码行并选择“Blackbox script”

这里有一个很好的动画GIF，向您展示如何做到这一点。 https://umaar.com/dev-tips/128-blackboxing/

适用于我的Chrome版本66.0.3359.139（官方版本）

另请参阅官方DevTools文档中的Ignore a script or pattern of scripts。

Answer 2

您可以黑名单脚本： https://developer.chrome.com/devtools/docs/blackboxing

这要求你的jquery在一个单独的文件中，而不是捆绑在使用像webpack这样的东西。

然后，您可以执行诸如向框架模式添加jquery.js（或其他）之类的操作。这将阻止调试器进入jquery代码

Answer 3

简短的回答，你可以黑盒子jQuery文件。这将确保调试器不输入jQuery代码。

  

黑名单脚本会发生什么？

     

  
• 从库代码抛出的异常不会暂停（如果启用了例外暂停），
  
• 单步进/出/绕过库代码，
  
• 事件监听器断点不会在库代码中断，
  
• 调试器不会在库代码中设置的任何断点上暂停。
  

     

最终结果是您正在调试应用程序代码而不是第三方资源。

来自：https://developer.chrome.com/devtools/docs/blackboxing

Answer 4

在您的函数体中添加debugger。