Firefox Developer Tools does not work with Webpack CSS source maps

Question

I had a problem with Firefox Developer Tools (Firefox Developer Edition 59.0b7) working with the CSS source maps created by Webpack in development mode (using webpack-dev-server).

In Firefox Developer Tools, when I check an element, this is the position of the CSS rules - these are some hash hashes, for example. blob:http://localhost:9090/1e451f65-5d5a-4155-a7a9-96df9945244binstead of real file names (screen below). Also, these link links are invalid - clicking on them does not lead me to the source file.

I also sometimes get errors like this in the Firefox Developer Tools console, which I'm probably related to:

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]

Chrome Developer Tools (Chrome 59.0.3071.104). ( ) SCSS .

Firefox Webpack CSS, , Chrome?

. devtools.debugger.source-maps-enabled true about:config.

Webpack:

// 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

, Firefox DevTools. , , .

, . , , , 1339970.