May 4, 2018

Webpack problem with source maps mapping in Chrome DevTools - Fixed -

Webpack problem with source maps mapping in Chrome DevTools - Fixed -cover image
#Chrome dev tools
#Webpack

[Fixed] Webpack problem with sourcemaps mapping in Chrome Dev Tools

I find it essential to be able to edit the code directly from the DevTools when debugging a javascript application. When Chrome added this feature to DevTools it was mind-blowing ✋.

But suddenly, it stopped working with newer versions of chrome (after v.64) for unknown reasons to me.

After trying to research the whole internet and trying to understand. Finally, the definite solution was share by RyanAtViceSoftware in Github. Let’s get directly into the problem without losing focus on fixing the problem.

You need to be sure you are using 2 things after adding the folder of your project to the workspace:

  • use “*module-**” in devtool option in webpack.conf.js, e.g: devtool: ‘cheap-module-source-map’

  • Add “devtoolModuleFilenameTemplate” option to your output option in webpack.conf.js as well

For Mac machines:

output: {
  ...
  devtoolModuleFilenameTemplate: info =>
    'file://' + path.*resolve*(info.absoluteResourcePath).replace(/\\/g, '/'),

For windows machines (three back bars — ///)

output: {
  ...
  devtoolModuleFilenameTemplate: info =>
    'file:///' + path.*resolve*(info.absoluteResourcePath).replace(/\\/g, '/'),

After rerunning your Webpack application, the maps should be now working.

I hope this solved the problem for you as well 💛