chrome开发者模式中跟踪点击事件

在chrome中浏览网页时,通过F12开启开发者模式,在source页签下可以查看到网页的源代码(html、js、css)。当我们想了解一个陌生网页中某个按钮的点击事件内部逻辑时,该如何快速查找呢?

其实,chrome已经考虑了这一点,可以在开发者模式中跟踪某一类事件,方法是:在Elements页签下,首先选中某个具有事件的组件(例如button),然后在EventListeners中可以查看到各种事件。如图

接下来,我们拿https://www.bejson.com/ 这个网站做一个例子:查看“格式化”、“压缩”按钮的点击事件内部代码。
首先,F12打开开发者模式,然后选中“格式化”按钮,在右侧EventListeners中,就可以看到click事件列表,如图:

 然后,在EventListeners的click列表中,点击对应的js文件,会自动跳转到Source页签,该js就是点击“格式化”按钮触发事件的代码函数,如图:

一般来说,网站的js都是压缩过的,chrome可以直接解压(点击Pretty-print),这样就方便看代码逻辑了。

最后,就是在对应的js代码中找相关的函数了。可以通过组件的id,比如在这个例子中,我们要查看“转义”按钮的事件函数, 可以先找到“转义”按钮的ID(escapeJson),然后在js文件中根据这个ID进行搜索:

 

 

おすすめ

転載: blog.csdn.net/liuxiao723846/article/details/118738094