При работе с 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 г.