如何在 Google Chrome DevTools 中的 lambda 调用处设置断点？

Question

我使用启用了 JavaScript 源映射的 Babel 和 Google Chrome 开发人员工具。鉴于此代码

function myFunc(elements) {
  return elements
    .map(element => element.value)
    .filter(value => value >= 0);
}

如何在执行 lambda 函数时暂停执行 element => element.value？如果我在 .map(element => element.value) 行设置断点，它只会在执行 map 时暂停，但不会在执行 lambda 函数时暂停。

Answer 1

您可以使用 debugger 关键字来指示调试器在该位置暂停，它可以像任何 JavaScript 语句一样插入。

function myFunc(elements) {
  return elements
    .map(element => {debugger; return element.value})
    .filter(value => value >= 0);
}

Answer 2

您可以进行如下操作：

    function myFunc(elements) {
      return elements
        .map(element => {
           return element.value;
        })
        .filter(value => value >= 0);
    }

这样你就可以在element.value

行添加一个断点

无法在不更改代码的情况下找到使其工作的方法。
如果有人能找到方法请告诉。

Answer 3

此功能终于可用（至少在 Google Chrome 58 年）。单击要调试的 lambda 行的行号（此处为第 3 行）。然后通过单击激活 lambda 中的标记（这里是第二个）。此外，我在这里禁用了第一个标记，它会在 map 调用（而不是 lambda）上暂停：

当您的程序运行并遇到断点时，它将暂停，您可以检查变量：

如何在 Google Chrome DevTools 中的 lambda 调用处设置断点？

How to set a breakpoint at a lambda call in Google Chrome DevTools?

javascript

lambda

breakpoints

google-chrome-devtools

source-maps