如何快速找出网页中事件对应的js代码片段

时间:2023-03-09 15:59:12
如何快速找出网页中事件对应的js代码片段

后端人员也免不了要处理一些前端的事情,由于代码不是自己写的,所以不好找到相关的代码。
比如在表单提交时,前端提交的数据不正确,这时候你可能会想在谷歌浏览器里添加一个鼠标
点击事件的断点。
如何快速找出网页中事件对应的js代码片段

然而查看js的调用堆栈你会发现,傻眼了,一大堆jquery或其它js库的代码。

如何快速找出网页中事件对应的js代码片段
怎么办呢?

使用浏览器自带的blackbox,即把不需要的放到黑盒里

1、先打开开发者工具,然后选择设置,如下

如何快速找出网页中事件对应的js代码片段

2、添加排除的js库,排除规则支持正则表达式

如何快速找出网页中事件对应的js代码片段

另外还有一个方法,安装一个浏览器插件VisulalEvent

如何快速找出网页中事件对应的js代码片段

1、点击这个眼睛,等待一会就可以看到如下

如何快速找出网页中事件对应的js代码片段

2、然后鼠标移到相应的元素,就可以看到对应的代码了

如何快速找出网页中事件对应的js代码片段

参考了此文