javascript - 在浏览器中找到用于调试 javascript 的侦听器的最快方法是什么？

Question

背景：

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

我第一次需要处理 Java 脚本是当一个特定的行为出乎意料时（即它出错了。）

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

示例：我在页面上有一个 html 元素，比如说一个按钮。单击该按钮时，我希望在服务器上看到一个 http 请求。元素可以通过多种方式与其 Java 脚本侦听器相关联。例如 JQuery、淘汰赛等第三方插件、内部脚本等。

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

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

标签： javascriptdebuggingbrowser

Answer 1

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

1. 在元素选项卡中选择一个元素
2. 在元素树的右侧，单击“事件侦听器”选项卡。
3. 找到您要调试的事件（如click）
4. 单击超链接以调出事件侦听器的代码，并设置断点。有时您必须单击“格式化代码”按钮（看起来像{ }）以获取多行代码，以便可以管理断点。
5. 点击一下，你会遇到断点，允许你单步执行代码，添加监视变量等。