如何跟踪 Marionette 中的函数调用

Question

全局范围内的某处：

let App =  Backbone.Marionette.Application.extend({});
window.Ext = new App();

模块 A 内部：

Ext.vent.trigger('Tracked:Email:send', {
    from_email: tracking_data.sender,
    to_emails: tracking_data.to,
    cc_emails: tracking_data.cc,
    email_id: tracking_data.email_id || '',
    template: tracking_data.template_id || '',
    subject: tracking_data.subject
});

模块 B 内部：

Ext.vent.on('all', function (evt_name, params) {
    // something else...
    console.log(params);
}

当我在模块 B 中调用 console.log 时，对象的属性（from_email、to_emails 和 cc_emails）是 undefined。

我已尝试使用 console.trace 对其进行调试，但控制台未显示任何涉及更改对象的函数。我也尝试过使用 Object.observe 来捕获更改对象的行为，但未检测到任何更改。

有人可以教我一些调试技巧来跟踪 Marionette 中的函数调用和事件吗？

场景是：

我们的代码库很大。
我是我们公司的新人，所以我不确定是否涉及其他功能或事件。
我是目前唯一的前端开发人员。

Answer 1

好消息：Marionette 没有什么特别之处。日常 JavaScript 调试技巧将帮助您。

坏消息：如您所知，调试大型事件驱动应用程序困难。

您可以在 Chrome 开发工具（使用其他浏览器的 YMMV）中执行这些步骤：

拆分 App.trigger 行以获取对参数对象的引用：

let options = { from_email: ... }
App.vent.trigger('Tracked:Email:send', options);

Set a breakpoint Ext.vent.trigger 和运行您的代码。

当执行在断点处暂停时，检查 options 是否包含预期值。如果不是，则问题出在 App.vent.trigger 之前的某处。在 call stack 中查找任何影响 tracking_data 的函数。如果它是由异步代码填充的，您可能需要选中 Async 复选框。

如果options包含您期望的值，继续...
暂停执行时使用控制台保存对参数对象的全局引用：

> OPTIONS = options

将 OPTIONS 添加为 watch expression。展开该项目，以便您可以查看其属性的变化。
单步执行（包括 Marionette 和 Backbone 代码）直到您看到 OPTIONS 属性发生变化。如果您在进入 App.vent.trigger 时没有看到 Marionette 代码，您可能需要从 black boxed libraries.

如何跟踪 Marionette 中的函数调用

How to trace function calls in Marionette

javascript

debugging

marionette