debugging - breakpoints when transforming an array in javascript -

i have been getting more functional approach writing javascript. i'm trying figure out how debugging should done in way when transforming arrays. more precise, how can use of breakpoints? here example a:

myarray   .filter(foofilter)   .sort(foosort)   .map(foomap)   .reduce(fooreduce) 

how 1 add breakpoint this? if code looked instead (more imperative way) example b:

const filteredarray = myarray.filter(foofilter); const sortedarray = filteredarray.sort(foosort); const mappedarray = sortedarray.map(foomap); const reducedarray = mappedarray.reduce(fooreduce); 

adding breakpoints example above not problem.

so trying ask if possible somehow modify example a somehow support easier breakpoints? also, how should 1 think when comes debugging when writing according functional paradigm?

edit 1:

i trying put breakpoint through webbrowser such chrome. adding through changing code not solution im looking here.

i trying add breakpoint after each transform see result of transformation is.

edit 2:

i have tested both chrome debugger , vscodes own debugger. let put breakpoints inside transform function. not allow set breakpoints after each transform function though (which think useful case).

you can try extend array prototype custom function:

array.prototype.mydebugfn = function(){   debugger;  return this; } 

then can chain .mydebugfn() whenever needed :

myarray   .filter(foofilter)   .sort(foosort)   .mydebugfn()   .map(foomap)   .reduce(fooreduce) 

ps: in general, it's bad idea modify/extend built-in object prototypes