Chrome中如何快速定位触发点击的自有源码点击事件？

嘿，我懂这种被一堆第三方文件绕晕的感觉！试试下面这几个Chrome DevTools的实用技巧，帮你直接跳过非自有源码，精准定位到自己写的点击事件：

• 用事件监听器筛选器过滤第三方代码
  打开Elements面板的「Event Listeners」标签，先在顶部筛选框输入click缩小范围，然后右键点击列表里的第三方库（比如jQuery相关）事件，选择「Hide Library Code」。这样列表里就只会显示你自己绑定的点击事件了，点击事件条目里的「handler」链接，就能直接跳转到对应的自有源码。

• 给第三方库设置黑箱（Blackboxing）
  把所有不想跟进的第三方文件加入黑箱，调试器会自动跳过它们：

  • 打开Sources面板，找到jQuery、插件这类非自有文件，右键选择「Blackbox Script」；
  • 或者去右上角齿轮图标打开Settings，找到「Blackboxing」选项，添加匹配规则（比如*.jquery.js、*.min.js），批量黑箱所有第三方压缩文件。
    设置完成后再触发点击，调试器只会停在你的自有代码里。

• 直接在自有源码加临时断点
  如果你大概知道点击事件的绑定位置，直接去Sources面板找到你的JS文件，在可能的绑定行（比如element.addEventListener('click', myClickHandler)或者自定义的点击函数）左侧点击添加断点，触发点击后调试器会直接停在你要找的代码处。

• 用命令面板快速定位元素事件
  按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板，输入「Show Event Listeners for Element」并选中目标元素，就能快速列出该元素的所有绑定事件，再结合筛选功能找到自有代码。

内容的提问来源于stack exchange，提问作者user1283776