javascript - 在浏览器中查找监听器以调试 javascript 的最快方法是什么？

Question

背景:

我经常发现自己在一个不熟悉的代码库中调试网页上的一段 Java 脚本，而且通常是见过许多开发人员和编码方法的代码库。有时我什至不知道可能使用什么技术，例如。 Angular 等

我第一次需要处理 Java 脚本是当特定行为出现意外时(即出现错误)。

问题: 什么工具可以提供最快的途径来识别导致问题的代码的入口点？

示例: 我在页面上有一个 html 元素，比如说一个按钮。单击该按钮后，我希望在服务器上看到一个 http 请求。有多种方法可以将元素与其 Java 脚本监听器关联起来。例如JQuery、第三方插件(例如knockout 等)、内部脚本等等。

使用开发人员工具，我可以在浏览器中开始调试它，但前提是我已经知道要放置断点的入口点。

是否有比基于直觉和猜测工作在页面代码上进行正则表达式搜索以查找可能附加到该特定元素的内容更快的方法来找到入口点？

Answer 1

对我来说，最好的起点是 Chrome 开发者工具。您可以:

1. 在元素选项卡中选择一个元素
2. 在元素树的右侧，点击“事件监听器”选项卡。
3. 找到您要调试的事件(例如click)
4. 单击超链接可显示事件监听器的代码，并设置断点。有时您必须单击“格式化代码”按钮(类似于 { })才能将代码放在多行上，以便可以管理断点。
5. 单击此按钮，您将到达断点，从而允许您单步执行代码、添加监视变量等。