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进行搜索：