Отладка контрольных точек minfied/mangled/compiled variables

Работа над созданием исходных кодов JavaScript в моем рабочем процессе, и я искал некоторую документацию по определенной части отладочных исходных карт. На приведенном ниже рисунке я запускаю сжатый код Javascript, но через магию исходных карт отладчик Chrome смог восстановить, казалось бы, несжатый код для отладки:

Однако, если вы посмотрите на локальные переменные, someNumber и someOtherNumber не определены. Вместо этого мы имеем a и r, которые являются скомпилированными именами переменных для этой функции. Это то же самое для Mozilla Firefox и Chrome.

Я попытался просмотреть Документацию Chrome DevTools на исходных картах, но я ничего не видел об этом. Является ли это текущим ограничением отладки sourcemap и существуют ли какие-либо обходные пути для этого?

Обновление

С тех пор я нашел этот поток в проблемах с хромом. Это не похоже на то, что оно было или выполняется. Это становится все более важной проблемой, поскольку команды начинают внедрять Babel в свои системы сборки для написания кода ES2015. Кто-нибудь из команд нашел способ обойти это?

Ответ 1

Похоже, что он был рассмотрен и станет доступным в следующем обновлении Chromium

Ответ 2

Используя Watch Expressions с правой стороны, обычно решает это. Разверните меню и используйте кнопку "плюс", чтобы добавить переменные. Вы можете использовать someNumber и someOtherNumber, и даже someNumber + someOtherNumber.

Ответ 3

По-прежнему нет решения для сопоставления имен переменных в исходных картах Javascript, но есть решение для Babel 6. Поскольку мы приняли ES2015, измененные имена импорта стали главной причиной боли во время разработки. Поэтому я создал альтернативу преобразованию модуля CommonJS, который не меняет имена импорта, называемые babel-plugin-transform-es2015-modules-commonjs-simple.

Пока вы не пишете модули, зависящие от экспорта динамических привязок это замена для стандартного модуля babel commonjs преобразование:

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs-simple

и .babelrc:

"plugins": ["transform-es2015-modules-commonjs-simple"]

Это скомпилирует модули ES2015 в CommonJS без изменения каких-либо имен символов импортированных модулей. Оговорки описаны в readme.

Это не поможет вам с помощью minifying/ouglifying, так что лучшим решением является просто не использовать minification во время разработки. Тогда, по крайней мере, это только проблема, если вам нужно что-то отлаживать на рабочем веб-сайте.