Как установить точку останова при лямбда-вызове в Google Chrome DevTools?

Я использую инструменты разработчика Babel и Google Chrome с включенными исходными картами JavaScript. Учитывая этот код

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

как я могу приостановить выполнение при выполнении лямбда-функции element => element.value? Если я установлю точку останова в строке .map(element => element.value), она будет останавливаться только при выполнении карты, но не при выполнении лямбда-функции.


javascript lambda google-chrome-devtools breakpoints source-maps
person maiermic    schedule 05.06.2015    source источник
comment
Вы пытались добавить туда новую строку на исходном дисплее?   -  person    schedule 05.06.2015
comment
Это работает, но я бы предпочел избежать манипулирования исходным кодом, потому что мне нужно повторно транспилировать исходный код и перезагрузить страницу. После отладки я должен не забыть отменить эти изменения.   -  person maiermic    schedule 07.06.2015

Ответы (3)


arrow_upward
13
arrow_downward

Эта функция наконец-то доступна (по крайней мере, в Google Chrome 58). Нажмите на номер строки вашей лямбды, которую вы хотите отладить (здесь строка 3). Затем активируйте маркер в вашей лямбде (здесь второй), нажав на него. Кроме того, я отключил здесь первый маркер, который останавливал вызов map (не лямбда):

Установить точку останова

Когда ваша программа запустится и достигнет точки останова, она приостановится, и вы сможете проверить переменные:

Приостановлено в точке останова

person maiermic    schedule 23.05.2017
comment
У меня это работает по умолчанию для типичных js-файлов, но почему-то не работает с файлами с сопоставлением с исходным кодом (сгенерированным с использованием исходной карты). Эти файлы, похоже, допускают только одну точку останова в каждой строке, а в некоторых нет. Любые идеи? - person gaurav5430; 02.06.2019
comment
Это преобразование JS в JS? Как выглядит построенный код? Если вы добавите точку останова в созданный файл, отображается ли точка останова в файле с исходным кодом? - person maiermic; 02.06.2019
comment
У меня тоже не работает для файлов с сопоставлением с исходным кодом. Я транспилирую код React. Хотя в Firefox работает хорошо. - person bmakan; 06.10.2020

arrow_upward
2
arrow_downward

Вы можете использовать ключевое слово debugger, чтобы сигнализировать отладчику о паузе в этом месте, и его можно вставить так же, как любой оператор JavaScript.

function myFunc(elements) {
  return elements
    .map(element => {debugger; return element.value})
    .filter(value => value >= 0);
}
person shyam    schedule 05.06.2015
comment
Я не знал инструкции отладчика. Обучение никогда не прекращается. Однако я бы предпочел избегать манипуляций с исходным кодом. - person maiermic; 05.06.2015

arrow_upward
0
arrow_downward

Вы можете сделать следующее:

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

Таким образом вы можете добавить точку останова в строке element.value

Не удалось найти способ заставить это работать без изменения кода.
Если кто-то может найти способ, сообщите.

person benshabatnoam    schedule 24.04.2017
comment
Не забудьте return перед element.value, иначе вы получите undefined вместо value в filter. Плохо менять код для отладки. Вы не отлаживаете код, который действительно хотели бы отлаживать. - person maiermic; 24.04.2017