Отладка с хром с es6

Я пытаюсь использовать Ecmascript 2015 для моего проекта, и мне сложно добавить точки останова в определенных местах (места, которые, как я думал, были логичными, чтобы иметь точку останова).

У меня есть флаг enable-javascript-гармонии # в chrome, установленный в true (если это помогает), но я использую babeljs для пересылки и имеют исходные карты, которые непосредственно устанавливают точки останова в файле, который я хочу отлаживать. Я абсолютно уверен, что я делаю что-то неправильно, но может кто-нибудь указать мне, где я ошибаюсь.

Для справки я добавил GIF того, о чем я говорю.

введите описание изображения здесь

Ответы

Ответ 1

Проблема связана с исходным кодом (через исходные карты) с реальным отображением кода. Хотя источник является сжатым и плотным, сгенерированный код обычно длиннее, и сопоставление между ними не является (и, вероятно, не может быть) выполнено таким образом, чтобы гарантировать соотношение 1:1 между ними.

Поэтому, когда вы пытаетесь разместить точку останова в одном строковом выражении, например (foo) => bar, фактический выполненный код , по крайней мере, несколько длинные строки, и я предполагаю (и не знаю!), что devtools пытается разместить реальную точку останова просто на первой строке реального, запущенного кода. - Что в свою очередь терпит неудачу для выражений.

Это неотъемлемый недостаток сгенерированного кода и применяется ко всем языкам компиляции к js с исходными картами. К сожалению, я не знаю о хорошем обходном пути. В крайнем случае в этих случаях я просто отключу исходные карты в браузере и прохожу через реальный, сгенерированный код.

Надеюсь, что это поможет:/

Ответ 2

Вы следовали всем инструкциям здесь?

https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps

Кроме того, если вы включили флаг гармонии, вам не нужно будет использовать babeljs для пересылки, Chrome поймет ES6/2015 или, по крайней мере, подмножество, которое оно поддерживает... так что, возможно, отключите babeljs и избегайте исходных карт

Ответ 3

Обычно я просто виню исходные карты, но из того, что вы здесь показываете, я делаю вывод о сравнении отладки в chrome с инструкцией отладчика javascript. Я считаю, что они не работают по-другому.

Итак, мы знаем, что вы не можете разместить оператор отладчика в области параметров функций.

Это происходит в вашем записанном примере.

.then(debugger)

введите описание изображения здесь

Если вы хотите, чтобы там можно было сломать, вы должны добавить еще код.

.then((whatever) => { 
 // We need an existing empty line here.
 return whatever
})

Также отключается также отображение исходных карт, а затем просто выполняйте код по строкам.

Я замечаю, что вы хотите сделать паузу рядом или в обещании. Помните это предупреждение о том, что приостановка асинхронного кода в сложных приложениях может привести к условиям гонки и, кроме того, к неожиданному поведению.