如何有效调试方法链接的函数参数? [英] How to effectively debug method chained function arguments?

问题描述

看看下面的代码结构:

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

myFunction()将使用lodash进行的一些数组转换的结果作为其参数.虽然我喜欢代码的样式，但是我发现很难调试并最终将其重构为将lodash代码包含在另一个函数中，或者先将其分配给变量，然后将变量传递给myFunction().

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:

• 按原样，不能将console.log的权利添加到位.
• 在Chrome DevTools中无法设置断点，例如在.filter()和.uniq()
之间

• 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()

推荐答案

最好的方法是插入步骤:

The best way is insert step:

.tap(console.log)

其他方式:

创建混合功能

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

并像

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

或者您可以在像

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

这篇关于如何有效调试方法链接的函数参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！