Firefox Developer Tools don't work with Webpack CSS source maps - firefox

Question

I have a problem to make Firefox Developer Tools (Firefox Developer Edition 59.0b7) work with CSS source maps generated by Webpack in development mode (using webpack-dev-server).
In Firefox Developer Tools, when I inspect an alement, it's CSS rules locations are some chunk's hashes, e.g. blob:http://localhost:9090/1e451f65-5d5a-4155-a7a9-96df9945244b instead of real file names (screen below). Also those locations links are invalid - clicking them doesn't take me to the source file.
I'm also sometimes getting this kind of errors in Firefox Developer Tools console, which I are probably connected:
Source map error: Error: sourceMapURL could not be parsed Resource URL: blob:null/b9a1fdd6-c0a3-4426-9df0-d50f1e8dc670 Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3JvYmVydC9wcm9ncmFtbWluZy93ZWJwYWNrLXBsYXlncm91bmQvc3JjL2NvbXBvbmVudC1hL2NvbXBvbmVudC1hLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLGNBQWM7SUFDZCx1QkFBdUI7SUFDdkIsa0JBQWtCO0NBQ3JCOzs7QUFHRDtJQUNJLG1CQUFtQjtJQUNuQixpQkFBaUI7SUFDakIsaUJBQWlCO0NBQ3BCOzs7QUFHRDtJQUNJLG1CQUFtQjtDQUN0QiIsImZpbGUiOiJjb21wb25lbnQtYS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuQ29tcG9uZW50QSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xufVxuXG5cbi5Db21wb25lbnRBLUhlYWRlciB7XG4gICAgbWFyZ2luLWJvdHRvbTogM3B4O1xuICAgIGJhY2tncm91bmQ6ICNlZWU7XG4gICAgZm9udC1zaXplOiAxLjVlbTtcbn1cblxuXG4uQ29tcG9uZW50QS1Cb2R5IHtcbiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG59XG4iXSwic291cmNlUm9vdCI6IiJ9[Learn More]
Everything displays perfectly fine in Chrome Developer Tools (Chrome 59.0.3071.104) - I see original file names in the inspector (screen below) and original SCSS contents after clicking the the file name link.
Is there a way to make Firefox work properly with Webpack's CSS source maps like Chrome does?
My configuration
I have Enable Source Maps turned on in Developer Tools' options. devtools.debugger.source-maps-enabled is set to true in about:config.
Here are relevant excerpts from my Webpack config:
// I tried different devtools but the results in Firefox were the same.
devtool: 'eval-source-map'
(...)
// Chain of loaders for CSS files.
{
test: /\.(scss|sass|css)$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
autoprefixer
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
outputStyle: 'expanded',
/* Custom functions to use in Sass files. */
functions: {
'base64encode($text)': function(text) {
let textInBase64 = new Buffer.from(text.getValue()).toString('base64');
return new sass.types.String(textInBase64);
}
}
}
}
]
}

Answer 1

I'd guess this is a bug in the Firefox DevTools. And as far as I know, there is currently a lot of work going into fixing such source mapping issues.
Therefore, you should first try out the latest Nightly build and see if it's still a problem there. And if yes, file a bug for it and maybe mark it as blocker of bug 1339970.