如何获取触发事件时执行的 JavaScript 文件列表？

Posted 2023-02-22

【中文标题】如何获取触发事件时执行的 JavaScript 文件列表？

【英文标题】：How to get a list of JavaScript files that are executed when event is fired?

【发布时间】：2017-06-23 05:49:29

【问题描述】：

在复杂的系统中，如何获取在按钮单击或单击输入字段期间已触发的所有 javascript 文件的列表？

我可以用 chrome dev-tools 来做吗？或者还有其他解决方案吗？如果我可以用 chrome dev-tools 做到这一点，那该怎么做？

我面临的问题：我正在尝试查找包含我可以拦截的方法的文件，以便在按钮单击重定向到另一个页面之前添加我的自定义验证？文件名对我很有用，因为系统遵循干净的代码规则。

更新： 我找到了this tutorial，但提供的解决方案似乎都不起作用（我确信断点不起作用）。 @Carles Alcove 在推荐的帖子中建议的 Visual Event 扩展名，引导我到 knockout.js 文件。在该文件中，我按照@guest271314 的建议添加了console.trace() 函数（第二张图像是结果）。第一张图片是当我按照@user3297291 的建议使用开发工具检查按钮时

【参考方案1】：

您可以在click 事件处理程序中包含console.trace()、console.profile() 和console.profileEnd()，在console 和Profiles 选项卡中查看文件的行号DevTools

【讨论】：

Profiles 选项卡对我帮助很大（感谢您指出这一点）。我可以看到一些被触发的文件——唯一的问题是它并不完全准确。如果可以将分析器设置为在触发事件时开始记录，那将是完美的。

【参考方案2】：

您可以通过执行以下操作检查附加到开发人员工具中元素的事件侦听器的概述：

元素上的鼠标右键 在上下文菜单中检查元素 单击开发人员右侧面板中的 Event Listeners 选项卡。工具 检查mouseup 或click 事件。

您将看到附加的方法及其文件名。我不确定这是否适用于所有类型的事件侦听器（例如，如果事件绑定到父元素），但它是一种快速预测可能调用的方法。