How to inspect JavaScript function return value in Chrome debugger?

Question

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?

Mincey

var a = abc(); console.log(a); – Darcydarda

He's saying he wants to do it without changing the source though. – Prosit

Do you mean that every time any function returns a value, you want it logged to the console? Your console will get flooded with messages and probably hang if there is any recursion or similar things going on. – Plexiglas

As Waynn pointed out, it bears repeating: I want to see the function return value without changing source code. No, I do not want it logged to the console necessarily. It would be great if there were something in the sidebar like "last returned value". – Mincey

Having experienced this benefit with Visual Studio/gcc application development debugging, I believe there is HUGE value in this. Watching return values is a sanity check, extra data that is automatically almost always helpful to glance at as it goes by. It's like more screen real estate - you don't think you need it, then once you have it you wonder how you got along when you didn't. :-) – Rentfree

Answer 1

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!)

Cramped

Is there any variable name available for it so we can print it out in console ? Thanks – Molybdous

@nXqd Yes, there is a way. As this answer to “Is it possible to manipulate the return value in the chrome debugger?” explains, you can right-click “Return Value” in the Local scope and choose “Store as Global Variable”. – Teredo

Answer 2

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:

Rentfree

Answer 3

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

Seniority

IMO, this is the answer to the question, and it worked for me on Chrome 52. (which is not Canary) – Archaeology

Answer 4

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.

Talbot

Answer 5

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?

Prosit

Function return values are not always stored in variables. It would be great if there were an automatic variable or watched value in the sidebar for "last returned value". – Mincey

Yeah, that's true. Unfortunately, I don't believe that there's a way to see last returned value from a function. – Prosit

Answer 6

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.

Coel

Answer 7

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.

Cornstalk

Answer 8

Edit: I don't know if this is new, but if you put a breakpoint in a line with a method call you can put it after the method. If you then check the scope tab you'll see "local" with an arrow, click and you'll see "Return value:".

While not the most practical thing, the "trick" I use is to put a watch expression with the exact call to the function I wanna see the return value of.
So for example if I wanna check the return of testMethod(arg), I put a breakpoint at that method, I click "step out of current function" button, I then see the call to that function and I then put a watcher with the call I see there. You don't touch the source and it doesn't matter the value isn't stored in a variable.
Little workaround while you wait for the official functionality, even tho it may not always work.

Rianna