How to inspect JavaScript function return value in Chrome debugger?

JavascriptGoogle ChromeGoogle Chrome-Devtools

Javascript Problem Overview


Coming from gdb, it would print the return value of a function when it finished. Is there a way to get this information from the Chrome debugger without changing the source being debugged?

Javascript Solutions


Solution 1 - Javascript

A fix for this was implemented as of Nov 5, 2013, but apparently is only released, while I'm writing this, in Chrome Canary. (I see it in 33.0.1719.0, but don't see it in the Chrome Beta version 32.0.1700.19 beta.)

If the version you're running does have it, then when you step through a return statement, the debugger's Scope Variables Local scope includes a <return> entry with the value.

(I need to use Canary for the main debugging I do, but didn't notice the presence of the <return> entry until seeing the referenced notice in the issue!)

Solution 2 - Javascript

I'm using Chrome Version 57.0.2987.98 beta (64-bit) and it's in there, and really nice to have. Here's a screenshot:

enter image description here

Solution 3 - Javascript

My version of Chrome is 41.0.2272.118 m. Here is one good reason why you should place complex return statements on a separate line. If you add a breakpoint on any line after the return, Chrome will add (in this example) a "<return>: true" leaf under the "Local" node of the "Scope Variables" pane of the Sources panel when the breakpoint is hit.

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

Solution 4 - Javascript

No, there isn't a way at present.

There is an open enhancement request for it, however. It's assigned, and as of this writing it's waiting on this V8 enhancement.

Solution 5 - Javascript

If you set a breakpoint, you can hover your mouse over variables and it'll show what the values are -- does that work for what you're trying to do?

Solution 6 - Javascript

Maybe this will do?

1.) View the page source.

2.) Look for the function definition and copy it to your clipboard.

3.) Modify the function definition on your clipboard to log the value that it is about to return. (i.e., console.log(x); return x;)

4.) Paste the patched function definition into the console and run it. This will override the existing function.

5.) Trigger the function.

Solution 7 - Javascript

It's still not possible in Chrome, but it's possible in Firefox 24+. You need to Step Out (Shift+F11) from a function, and it will display the return value or the exception thrown in Function scope.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJohn FreemanView Question on Stackoverflow
Solution 1 - JavascriptklmView Answer on Stackoverflow
Solution 2 - JavascriptmoodboomView Answer on Stackoverflow
Solution 3 - Javascriptuser1050483View Answer on Stackoverflow
Solution 4 - JavascriptT.J. CrowderView Answer on Stackoverflow
Solution 5 - JavascriptWaynn LueView Answer on Stackoverflow
Solution 6 - JavascriptBez HermosoView Answer on Stackoverflow
Solution 7 - JavascriptVsevolod SolovyovView Answer on Stackoverflow