Как использовать исходную карту в стеке JS?

Ответ 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 комментарий.