Ответ 1
Когда вы открываете свои инструменты для разработчиков и нажимаете F1 или нажимаете на верхние правые три точки, в разделе "Источники" вы можете включить исходные карты JavaScript. Убедитесь, что этот параметр установлен.
Имейте в виду, что браузер должен иметь доступ к вашей исходной карте, если вы хотите, чтобы отображалась ошибка stacktrace. В производстве вы, вероятно, хотите, чтобы он скрывался от пользователей, поскольку они могут не об этом, и проверьте ваш непривязанный код. Службы, подобные Sentry, предоставляют возможность загружать исходные файлы в них таким образом, что ошибки будут отключены только для разработчика.
У некоторых людей также возникла проблема с тем, что исходные файлы не перезагружались. Чтобы исправить это, вы можете перезагрузить DevTools, находясь в нем, нажав Alt + R.
Учитывая, что вы на самом деле не сказали нам, какую систему сборки вы использовали, и ваш процесс минимизации, возможно, проблема заключается в том, как вы их генерируете.
Для gulp, вот как вы создаете исходные карты с плагин sourcemaps:
import sourcemaps from 'gulp-sourcemaps'
gulp.task('js', () => {
gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
// other pipes..
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'))
})
В разделе webpack вам просто нужно изменить параметр devtool на что-то вроде inline-source-maps или source-maps. Существует еще несколько настроек, и они точно определяют, что подходит для производства и сравнивают скорость/отображение там.
source-map-support также может быть полезен в node, но вам все равно нужно создать исходную карту и связать ее с sourceMappingURL комментарий.