Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to manipulate the return value in the chrome debugger?

Google's Chrome browser has a nice feature which shows you the return value in the debugger before you step out of the function. It shows up in the Scope list in one of the debugger panes along with Watch, Call Stack, etc. It looks like this.

I'm curious if there's console access to this variable?

I frequently have a need to do something like this while debugging:

<return>.filter(function(z) { return z >= 0; })

Or any other arbitrary way to understand whether the return value was what I was expecting. Unfortunately, I can't find a way to refer to <return> in the console. I was hoping there was some variable like $_ that would give me access, but I haven't found look looking in the likely places.

I realize I can look at the <return> object as it appears in the Scope list but if the item is a large array or complex object, etc., I would prefer to type some code into the debugger while paused at a breakpoint to see if I'm getting what I expect.

What I typically resort to is modifying my code to save the return value to a variable, and then reproducing the steps to get back to the breakpoint, but this is annoying.

Thoughts?

like image 227
Kevin Bullaughey Avatar asked Oct 13 '15 16:10

Kevin Bullaughey


People also ask

How do I change debug value in Chrome?

Go to DevTools settings (the cog wheel). Check General > Sources > Display variable values inline while debugging.

How do I change the value of variables in Google Chrome?

As of today (Chrome 67) you can just double-click any variable on the right hand side under the "Scope" section and edit it in real-time.

Can I edit source code in Chrome?

Editing JavaScript code in real-time is possible in Chrome and Chromium based browsers. After loading a web page completely, press the F12 key to open the developer tools, then open the 'Sources' tab. Now open any Javascript file loaded on the browser and you can directly edit it by clicking anywhere in that file.

Can you go backwards in Debugger?

So, if you've just taken a step in live debugging (F10 or F11), you can use the Step Backward button to quickly navigate to the previous step.


1 Answers

Store as Global Variable works in google chrome now, using Version 56.0.2924.87.

So, you step to the close brace of your function in the Sources tab, then context-click the Return Value, and choose Store as Global Variable.

The console tab will show something like

temp1 = ▶ MyClass {...}

From there on you can access temp1 just like any other variable in the console.

like image 142
Robin like the bird Avatar answered Sep 22 '22 08:09

Robin like the bird