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＆amp; cc_emails）为undefined。

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

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

场景是：

我们的代码库非常庞大。
我是公司的新人，所以我不确定是否还有其他功能或事件。
我现在是唯一的前端开发人员。

Answer 1

好消息：这里的木偶没什么特别的。日常的JavaScript调试技术将帮助您。

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

您可以在Chrome开发工具（YMMV与其他浏览器）中执行以下步骤：

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

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

Ext.vent.trigger

Set a breakpoint并运行您的代码。

执行在断点处暂停时，检查options是否包含预期值。如果没有，问题出现在App.vent.trigger之前的某个地方。查看call stack以查找影响tracking_data的所有功能。如果异步代码填充了异步复选框，则可能需要检查它。

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

> OPTIONS = options

将OPTIONS添加为watch expression。展开项目，以便您可以观察其属性的更改。
逐步完成（包括Marionette和Backbone代码），直到您看到OPTIONS属性发生变化。如果您在步入App.vent.trigger时没有看到木偶代码，则可能需要从black boxed libraries删除木偶。

如何在Marionette中跟踪函数调用

1 个答案: