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

在前端开发中，经常需要调试 JavaScript 代码。其中一个常见的任务是检查函数的返回值。在 Chrome 开发者工具中，可以使用几种方法来轻松地检查函数的返回值。

方法一：使用 Console.log()

Console.log() 是最常用的调试方法之一。您可以在函数内部添加 console.log() 语句来输出函数的返回值。这将在控制台中显示函数的返回值。

下面是一个简单的示例：

function addNumbers(a, b) {
    return a + b;
}

console.log(addNumbers(2, 3)); // 输出 5

该函数返回了两个数字的和，并使用 console.log() 输出结果。当您打开浏览器的控制台时，将看到“5”作为输出。

方法二：使用调试器的 Watch 面板

另一种广泛使用的调试方法是使用 Watch 面板。 Watch 面板允许您监视表达式并查看其值。在函数中使用 Watch 面板可以方便地检查函数的返回值。

要使用 Watch 面板，请遵循以下步骤：

1. 打开 Chrome 开发者工具。
2. 在 Sources 面板中选择要调试的源文件。
3. 在代码中找到要检查的函数并在其上设置断点。
4. 在调试器窗口的右侧找到 Watch 面板。
5. 单击“Add Expression”按钮并输入函数调用作为表达式（例如，addNumbers(2, 3)）。

Watch 面板将显示函数调用的返回值。

方法三：使用调试器的 Console 面板

除了 Watch 面板之外，您还可以在控制台中键入函数调用来检查其返回值。这适用于那些不需要调试的简单函数。只需在控制台中输入函数调用，并按 Enter 键即可查看结果。

以下是一个示例：

function multiplyNumbers(a, b) {
    return a * b;
}

multiplyNumbers(2, 3); // 返回 6

在控制台中输入 multiplyNumbers(2, 3)，然后按 Enter 键，您将看到“6”的输出。

小结

了解如何轻松地检查 JavaScript 函数的返回值是非常重要的。虽然 console.log() 是最常见的方法之一，但 Watch 和 Console 面板也非常有用。掌握这些技巧可以帮助您更有效地进行调试和开发。

希望这篇文章对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26033