Debugging higher order functions in Javascript: is it possible for the WS debugger to step through the callback?

It may be that I'm new to the WS debugger, but I'm having trouble getting it to step through passed functions, such as that which might be passed to `Array.prototype.map` -- that is, if I use the Chrome debugger, I can step into and even set breakpoints within the passed function.  Is this possible with the WS debugger?  (I'm debugging a React app created with create-react-app, and I understand that this may not generate the most accurate debugging experience)

0
5 comments

Haven't got what you mean. Please can you provide a sample code?

0
Avatar
Permanently deleted user

What I meant is that when you have a function such as 

 

    const map1 = array1.map(x => x * 2);

(or array.reduce, etc), does the debugger allow one to enter inside the anonymous function, to see the values of 'x' at each step?  I'm almost certain that this is the case, but I recall having difficulty at one point.  If I can reproduce I will add detail.

 

0

Sure:) When setting breakpoint at

const map1 = array1.map(x => x * 2);

line, you will be prompted to choose an item to set breakpoint for:

select the arrow function from the list and, once breakpoint is hit, use Step Over to see values at each step:

1
Avatar
Permanently deleted user

Thank you -- that's very helpful.  It's "step over", then?  I had thought "step into"....

What, in this context, is the difference between 'line' and 'all' for setting the breakpoint?

Would the above also work for arrow function like these, that are returned from an object? These are the ones where I was having the issue: I wanted to set a breakpoint in the object returned from the returned arrow function, that is, for instance, set a breakpoint on the lines with "zippy" in the following extract to see the values of 'zoopy', 'zappy' and 'zippy'.  I couldn't get this to work....

 

{
someFuncs: {
blob1: ({ blob }) => ({
zoopy: !blob,
zappy: blob === 'none',
zippy: `${blob || 'ellipse'}`,
}),
blob2 :({ blob2, ingbot }) => ({
zoopy: !blob,
zappy: blob === 'none',
zippy: `${blob || 'abdefgh'}${blob === 'bing' ? 'bong' : ''}`,
}),
}
}
}
0

You can't inspect callback return value while debugging; if you miss this feature, please follow https://youtrack.jetbrains.com/issue/WEB-36917 for updates

0

Please sign in to leave a comment.