用户事件上的 Javascript 断点

Question

当我在我的应用程序中单击一个按钮时，将执行一系列 Javascript 代码，在这种特殊情况下，我单击“取消”按钮以关闭当前打开的模式窗口。这close按钮在 HTML 上看起来像这样:

<a class="cancel close">Cancel</a>

我需要一种方法来跟踪单击此 <a> 的操作“触发”了什么Javascript 中的元素，而无需查看 .js 文件以获取对此 DOM 元素的引用(其中事件绑定(bind)到 <a> 元素)。

有没有办法在用户生成事件后在 Javascript 中创建某种断点，但我不知道该 Javascript 代码在哪里？为了实际找到该代码的位置。

我正在使用 Google Chrome/Developer Tools 调试 Javascript。

Answer 1

打开开发者控制台；切换到脚本选项卡；单击左边距(在行号上)以设置断点。脚本的执行将在断点处暂停，您可以检查调用堆栈、局部变量等。

或者，您可以在触发事件之前点击“暂停”，脚本将在脚本即将执行时暂停(如设置全局断点)，并向您展示代码。然后您可以恢复、跳过、进入或退出当前函数/表达式。

您可以在 Firebug 以及 Safari、Chrome、Opera 和 IE 中的内置控制台中执行此操作。

编辑:我应该补充一点，如果你有 javascript 驱动的动画、ajax 轮询或其他间隔调用的代码，暂停按钮就没那么有用了，因为暂停按钮停止任何脚本执行，直到您单击恢复。因此，当调用动画的更新函数时，它会暂停，可能在您有机会触发您感兴趣的代码之前。

但是，在大多数(如果不是全部)开发人员控制台中，也有“异常中断”和“未捕获异常中断”选项。就像暂停按钮一样，它就像有一个全局断点，只是只有在遇到问题时才会停止。因此，如果您尝试查找的代码导致错误或引发异常，您可以将调试器设置为在发生这种情况时暂停脚本。