Firefox 开发者工具不适用于 Webpack CSS 源映射

Posted 2023-02-27

【中文标题】Firefox 开发者工具不适用于 Webpack CSS 源映射

【英文标题】：Firefox Developer Tools don't work with Webpack CSS source maps

【发布时间】：2018-07-22 21:13:43

【问题描述】：

我无法让 Firefox 开发者工具（Firefox 开发者版 59.0b7）与 Webpack 在开发模式下生成的 CSS 源映射（使用 webpack-dev-server）一起工作。

在 Firefox 开发者工具中，当我检查一个元素时，它的 CSS 规则位置是一些块的哈希值，例如blob:http://localhost:9090/1e451f65-5d5a-4155-a7a9-96df9945244b 而不是真实的文件名（屏幕下方）。这些位置链接也无效 - 单击它们不会将我带到源文件。

我有时也会在 Firefox 开发者工具控制台中遇到此类错误，我可能已连接到该控制台：

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 开发人员工具 (Chrome 59.0.3071.104) 中，一切都显示得非常好 - 单击文件名链接后，我在检查器中看到了原始文件名（下面的屏幕）和原始 SCSS 内容。

有没有办法让 Firefox 像 Chrome 一样使用 Webpack 的 CSS 源映射正常工作？

我的配置

我在开发者工具的选项中开启了启用源地图。 devtools.debugger.source-maps-enabled 在about:config 中设置为true。

以下是我的 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);
                    
                
            
        
    ]

【参考方案1】：

我猜这是 Firefox DevTools 中的一个错误。据我所知，目前有很多工作要解决此类源映射问题。

因此，您应该先试用latest Nightly build，看看那里是否还有问题。如果是，file a bug for it 并可能将其标记为 bug 1339970 的阻止者。

【讨论】：

实际上源映射工作已经停止（我搬到了另一个项目）。在这种情况下，我会四处走动，说问题在于blob: 的使用。一个新的错误将不胜感激，请随时抄送我。

超级有用（远远超出要求）将是 github.com/tromey/source-map-examples 的 PR，它演示了该错误。