How to effectively debug method chained function arguments?

Question

Have a look at the following code structure:

myFunction(
  _(myArray)
    .filter({ keep: true })
    .uniq('id')
    .value()
);

myFunction() takes as its argument the result of some array transformation using lodash. While I like the style of the code, I find it hard to debug and end up refactoring it to have the lodash code inside another function or assign it to a variable first, then pass the variable to myFunction().

Do you know of an effective way to debug the function argument code without refactoring? Some thoughts:

• As is, one cannot add console.log's right in place.
• In Chrome DevTools it's not possible to set a breakpoint e.g. between .filter() and .uniq()

Answer 1

The best way is insert step:

.tap(console.log)

Other ways:

create mixin function

var debug = function (val) {
    console.log(val);
    return val;
}
_.mixin({'debug': debug})

and use it like

_(myArray)
    .debug()
    .filter({ keep: true })
    .debug()
    .uniq('id')
    .debug()
    .value()

or you can override lodash functions before it use like

_.filter = _.wrap(_.filter, function(func, val) {
    console.log(func(val));
    return func(val);
});