How to set breakpoint on lambda call in Google Chrome DevTools?

Question

I am using Babel and Google Chrome developer tools with JavaScript source maps enabled. Given this code

function myFunc(elements) { return elements .map(element => element.value) .filter(value => value >= 0); } 

how to pause execution while executing element => element.value lambda function? If I set a breakpoint on the line .map(element => element.value) , it will stop only when the map is executed, but not when the lambda function is executed.

Answer 1

This feature is finally available (at least in Google Chrome 58). Click on the line number of your lambda that you want to debug (here is line 3). Then activate the marker in your lambda (here the second one) by clicking on it. Also, I turned off the first marker here, which would stop on calling map (and not lambda):

When your program starts and hits the breakpoint, it pauses and you can check the variables:

Answer 2

You can use the debugger keyword to signal the debugger to pause at that point, and you can insert it just like any JavaScript statement.

 function myFunc(elements) { return elements .map(element => {debugger; return element.value}) .filter(value => value >= 0); } 

Answer 3

You can do the following:

  function myFunc(elements) { return elements .map(element => { element.value }) .filter(value => value >= 0); } 

This way you can add a breakpoint to the element.value line

Could not find a way to make it work without changing the code.
If anyone finds a way, please tell me.