如何在 Chrome 调试器中检查 JavaScript 函数返回值？答案

【问题标题】：How to inspect JavaScript function return value in Chrome debugger?如何在 Chrome 调试器中检查 JavaScript 函数返回值？
【发布时间】：2012-03-28 13:52:40
【问题描述】：

来自 gdb，它会在函数完成时打印函数的返回值。有没有办法在不更改被调试源的情况下从 Chrome 调试器获取这些信息？

【问题讨论】：

var a = abc(); console.log(a);
他说他想在不改变源的情况下这样做。
你的意思是每次任何函数返回一个值时，你都希望它记录到控制台？如果发生任何递归或类似事情，您的控制台将被消息淹没，并且可能会挂起。
正如 Waynn 所指出的，值得重复：我希望看到函数返回值而不更改源代码。不，我不希望它一定要记录到控制台。如果侧边栏中有“最后返回值”之类的内容，那就太好了。
在体验过 Visual Studio/gcc 应用程序开发调试带来的好处后，我相信这其中有巨大的价值。查看返回值是一种健全性检查，额外的数据几乎总是有助于在经过时自动查看。这就像更多的屏幕空间 - 你认为你不需要它，然后一旦你拥有它，你就会想知道当你没有它时你是如何相处的。 :-)

标签： javascript google-chrome google-chrome-devtools

【解决方案1】：

如果您设置了断点，您可以将鼠标悬停在变量上，它会显示值是什么——这对您要执行的操作有用吗？

【讨论】：

函数返回值并不总是存储在变量中。如果“最后返回值”的侧边栏中有一个自动变量或监视值，那就太好了。
是的，没错。不幸的是，我不相信有办法查看函数的最后返回值。

【解决方案2】：

这样可以吗？

1.) 查看页面源代码。

2.) 查找函数定义并将其复制到剪贴板。

3.) 修改剪贴板上的函数定义以记录它即将返回的值。（即console.log(x); return x;）

4.) 将修补后的函数定义粘贴到控制台并运行它。这将覆盖现有函数。

5.) 触发函数。

【讨论】：

【解决方案3】：

不，目前没有办法。

不过，它有一个open enhancement request。它已分配，在撰写本文时它正在等待this V8 enhancement。

【讨论】：

【解决方案4】：

在 Chrome 中仍然不可能，但在 Firefox 24+ 中是可能的。您需要从函数中跳出（Shift+F11），它会显示返回值或函数范围内抛出的异常。

【讨论】：

【解决方案5】：

A fix for this 于 2013 年 11 月 5 日实施，但显然仅在我写这篇文章时在 Chrome Canary 中发布。（我在 33.0.1719.0 中看到它，但在 Chrome Beta 版本 32.0.1700.19 beta 中没有看到它。）

如果您正在运行的版本确实有它，那么当您单步执行 return 语句时，调试器的 Scope Variables 本地范围包括一个带有值的 <return> 条目。

（我需要使用 Canary 进行主要调试，但直到看到问题中引用的 notice 才注意到存在 <return> 条目！）

【讨论】：

是否有任何可用的变量名，以便我们可以在控制台中打印出来？谢谢
@nXqd 是的，有办法。正如this answer 到“Is it possible to manipulate the return value in the chrome debugger?”所解释的那样，您可以在本地范围内右键单击“返回值”并选择“存储为全局变量”。

【解决方案6】：

我的 Chrome 版本是 41.0.2272.118 m。这是您应该将复杂的 return 语句放在单独的行上的一个很好的理由。如果您在返回后的任何行添加断点，Chrome 将在断点位于 Sources 面板的“Scope Variables”窗格的“Local”节点下（在此示例中）添加一个“: true”叶命中。

function bar() {
   return true;
}    
(function foo() {
   return bar();
})(); // Place breakpoint here

【讨论】：

IMO，这是问题的答案，它在 Chrome 52 上对我有用。（不是 Canary）

【解决方案7】：

我使用的是 Chrome 版本 57.0.2987.98 测试版（64 位），它就在其中，真的很不错。截图如下：

【讨论】：