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

Posted 2023-03-07

【中文标题】如何在 Google Chrome DevTools 的 lambda 调用中设置断点？

【英文标题】：How to set a breakpoint at a lambda call in Google Chrome DevTools?

【发布时间】：2015-08-20 06:19:38

【问题描述】：

我使用启用了 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 函数时暂停。

【问题讨论】：

您是否尝试在源显示中添加换行符？

这行得通，但我宁愿避免源代码操作，因为我必须重新编译我的源代码并重新加载页面。调试后我必须记住撤消这些更改。

【参考方案1】：

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

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

【讨论】：

默认情况下，这适用于典型的 js 文件，但不知何故，它似​​乎不适用于源映射文件（使用源映射生成）。这些文件似乎只允许在每一行上设置一个断点，而在某些文件上没有断点。有什么见解吗？

是JS到JS的转换吗？构建的代码是什么样的？如果在构建的文件中添加断点，断点是否显示在源映射文件中？

对我来说也不适用于源映射文件。我编译 React 代码。不过在 Firefox 中运行良好。

【参考方案2】：

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

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

【讨论】：

我不知道调试器语句。学习永不止步。但是，我更愿意避免源代码操作。

【参考方案3】：

你可以这样做：

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

这样你就可以在element.value行中添加断点

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

【讨论】：

不要忘记在element.value 之前的return，否则你会在filter 中得到undefined 作为value。将代码更改为调试是不好的。你没有调试你真正想要调试的代码。

@maiermic 你说得对，我更新了答案，谢谢