如何有效地调试方法链函数参数？答案

【问题标题】：How to effectively debug method chained function arguments?如何有效地调试方法链函数参数？
【发布时间】：2017-03-29 05:47:17
【问题描述】：

看看下面的代码结构：

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

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

您知道无需重构即可调试函数参数代码的有效方法吗？一些想法：

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

【问题讨论】：

我的想法：如果任务复杂到需要调试，那么提取到一个单独的函数，将它传递到链中，并在那里设置一个调试点。您也可以使用.tap 来打印现在里面的内容。然而这里呈现的东西看起来完全没问题——只要输入的数据符合预期，链就会工作，所以没有必要调试那个只看进来的东西。跨度>
这样的链式代码不容易调试。我通常将每一步都保留在本地，直到我把它们做对为止。然后，一旦我得到所需的输出，就组装链并理想地将其分解为一个函数。如果你在调试的时候也摸不到代码，那就太倒霉了……
我想补充一下——我所说的对 lodash 来说是正确的——如果你的代码支持流畅的接口并且你想调试那种链......那么我建议不要使用 fluent界面。除非您的代码在概念上和经过测试的 lodash 一样简单。如果您将相对简单的函数（例如数组 -> 映射 -> 过滤器 -> 映射 -> 减少）与每个函数中的微不足道的回调链接起来，那么在调试中并不需要付出巨大的努力。
感谢您的 cmets！ @vlaz 我忘记了.tap()，像.tap(function(array) { debugger; }) 这样的东西很好用（我不介意像console.log 这样添加行，我只是不想在需要查找某些内容时重新排列整个部分） .我同意你的最后一条评论：如果我是方法链我自己的代码，我可能只是在函数调用中我自己的代码中设置断点。
我通常只是在语句之前中断，并根据需要在控制台中复制/粘贴它的片段，然后查看结果（虽然它们与原始变量分离）

标签： javascript underscore.js lodash

【解决方案1】：

最好的方法是插入步骤：

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

或者你可以在使用之前覆盖 lodash 函数

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

【讨论】：