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)
Please sign in to leave a comment.
Haven't got what you mean. Please can you provide a sample code?
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.
Sure:) When setting breakpoint at
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:
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' : ''}`,
}),
}
}
}
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