При работе с ES6, React или другим кодом, который должен быть скомпилирован Webpack, отладка из браузера с помощью DevTools может быть затруднена, поскольку вместо вашего исходного кода он отображает скомпилированный и минимизированный код, который может быть трудно читать.

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

Использование исходных карт решает эту проблему, позволяя отлаживать исходный код. Это сопоставляет строки кода в скомпилированном файле с соответствующими строками в исходном файле.

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

Давайте начнем! В Google Chrome откройте DevTools, нажав command + option + i на Mac или ctrl + shift + i на Windows, затем нажмите три вертикальные точки в правом верхнем углу. для вызова меню настроек. Затем нажмите Настройки.

На вкладке "Настройки" убедитесь, что отмечены оба флажка: "Включить исходные карты JavaScript" и "Включить исходные карты CSS".

Для создания исходных карт с помощью Webpack, работающего в рабочей среде, все, что вам нужно сделать, — это добавить свойства devtool и sourceMapFilename в файл webpack.config.js.

module.exports = {
  entry: {
    app: `${__dirname}/src/index.jsx`
  },
  output: {
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    path: `${__dirname}/dist`
  },
devtool: 'source-map'
};

Если вы хотите выполнять отладку в процессе разработки, удалите все -d (для разработки) или -p (для рабочей ) из сценария Webpack и установите для свойства devtool в webpack.config.js значение eval-source-map. Эрик Айбар

Затем вам нужно добавить комментарий с sourceMappingURL в конец вашего файла для компиляции. Это указывает на исходную карту.

//# sourceMappingURL=/dist/app.js.map

Когда вы запускаете свой сценарий Webpack, он компилирует ваши файлы и создает исходную карту в месте назначения, указанном в вашем файле webpack.config.js по выходному пути.

Для справки, вот ошибка без сопоставления источника:

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

И ниже показано, как это будет выглядеть с сопоставлением источника:

Надеюсь, это так же полезно для вас, как и для меня!

Первоначально опубликовано на https://www.mikeglopez.com 4 июня 2019 г.