How to trace function calls in Marionette

Question

Somewhere in the global scope:

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

Inside Module 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
});

Inside Module B:

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

The object's properties (from_email, to_emails & cc_emails) are undefined when I call console.log in Module B.

I've tried to debug this using console.trace, but the console doesn't show any functions that are involved in changing the object. I've also tried using Object.observe to capture the act of changing the object but no changes are detected.

Can some please teach me some debugging techniques to trace function calls and events in Marionette.

The scenario is:

1. our codebase is huge.
2. I'm a new guy at our company so I'm not sure if there are other functions or events that are involved.
3. I'm the only front end developer right now.

Answer 1

The good news: there's nothing special about Marionette here. Everyday JavaScript debugging techniques will help you out.

The bad news: as you're aware, debugging large, event-driven applications is difficult.

You could take these steps in Chrome dev tools (YMMV with other browsers):

1. Split the App.trigger line to get a reference to the parameters object:

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

2. Set a breakpoint on Ext.vent.trigger and run your code.

   When execution pauses at the breakpoint, check that options contains the expected values. If not, the problem is somewhere before App.vent.trigger. Look up the call stack for any functions that affect tracking_data. You may need to check the Async checkbox if it is populated by asynchronous code.

   If options contains the values you expect, carry on...

3. Whilst execution is paused use the console to save a global reference to your parameters object:

> OPTIONS = options

4. Add OPTIONS as a watch expression. Expand the item so you can watch changes to its properties.

5. Step through (including Marionette and Backbone code) until you see the OPTIONS properties change. If you don't see Marionette code when you step into App.vent.trigger you may need to remove Marionette from your black boxed libraries.