我之前也碰到过一模一样的问题，Firefox 59.0b7这个早期beta版本对Webpack dev server生成的CSS源映射确实有兼容性坑，给你几个亲测有效的解决思路：

1. 检查Webpack的源映射配置 #

首先确保你的css-loader已经开启了source map，同时选对开发环境的devtool类型：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { sourceMap: true } }
        ]
      }
    ]
  },
  // 开发环境优先用这个，比eval-source-map更兼容Firefox早期版本
  devtool: 'cheap-module-inline-source-map'
};

注意：别在开发环境用source-map（全量生成独立map文件），不仅编译慢，Firefox对它的解析也容易出问题；而eval-source-map生成的映射会被Firefox识别成blob URL，就是你碰到的情况。

2. 调整Firefox开发者工具设置 #

打开开发者工具后按F1进入设置面板，确认以下选项都已勾选：

• 启用源映射
• 启用CSS源映射
  另外可以尝试关闭「启用样式编辑器的工作区」选项，早期版本这个功能会干扰CSS源映射的解析逻辑。

3. 升级Firefox版本 #

59.0b7是2018年的beta版本，后续的正式版和开发者版修复了大量source map相关的bug，直接升级到最新的Firefox开发者版应该能解决80%的问题，这也是成本最低的解决方案。

4. 替换style-loader为mini-css-extract-plugin #

style-loader会把CSS注入到JS chunk里，生成blob形式的URL，Firefox早期对这种方式的源映射支持很差。如果你的项目可以接受开发环境热重载稍微慢一点，可以换成mini-css-extract-plugin把CSS抽成单独文件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin({ filename: '[name].css' })],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: true } }
        ]
      }
    ]
  },
  devtool: 'source-map'
};

抽成单独CSS文件后，源映射会直接关联真实的文件路径，Firefox就能正常识别并跳转了。

我当时是通过升级Firefox版本+调整devtool配置解决的问题，你可以先从升级浏览器开始试，应该能快速见效。

内容的提问来源于stack exchange，提问作者Robert Kusznier