在Chrome中检测到了Sourcemaps，但原始代码未加载，使用Webpack-2。

Question

当运行一个使用webpack 2构建的应用程序时，在chrome中检测到了sourcemaps，但是原始源代码没有加载。我正在使用webpack beta21。

这些文件过去会自动被检测到，也就是说，当在webpack js文件输出中设置断点时，源视图会跳转到webpack的原始输入源。但现在我卡在了这个屏幕上： 配置：

var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');


const PATHS = {
  app: path.join(__dirname, '../client'),
  build: path.join(__dirname, '../public')
};

module.exports = {


  entry: {
    app: PATHS.app + '/app.js'
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },


  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ],
        exclude: /node_modules/

      },

      {
        test: /\.css/,
        loader: "style!css"
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  } ,
  plugins: [
    new WebpackBuildNotifierPlugin()
  ]

};

- Nikos

---

对我来说，这只有在使用inline-source-map时才有效。 - kuhnroyal

自那时起有任何解决此问题的方案吗？我正在使用 Electron（Chrome 86）、Webpack 4 和 inline-source-maps 遇到了这个问题。 - Eric Burel

我在两年前停止使用 Webpack。 - Nikos

我在两年前停止使用 Webpack。 - undefined

Answer 1

生成带有源代码映射的文件不会自动重定向到它们的原始文件，因为存在可能的一对多关系。

如果您看到消息检测到源代码映射，则原始文件应该已经通过Crl+P出现在侧面文件树或文件资源管理器中。如果您不知道原始文件名，可以打开源代码映射文件本身。

1. 可以通过 //# sourceMappingURL= 注释或 X-SourceMap 头部来识别源映射路径：

   

2. 通过 url 打开源映射文件，并查找 sources 属性以获取原始文件名：

   

3. 原始文件应该在源面板中可见：

   

如果您没有看到消息 Source Map Detected

您可以右键单击并选择 Add Source Map 来手动添加外部源映射：

额外资源

• 如果仍然不起作用，您可以尝试使用源映射验证器
• 对于webpack特别的，您可以配置devtool属性

- KyleMit

---

我尝试添加源映射，但没有任何效果。源映射验证器也无法工作。我已经尝试使用Mozilla库，并正确解析源映射。 - Matteo

对于使用NW.js的人，请注意，如果使用“添加源映射...”选项，您的源映射路径需要是file:///路径。 - undefined

Answer 2

如果您正在映射到工作区，那就意味着您已经拥有了源代码。在源映射中包含源代码会创建不必要的冗余。

请改用nosources-source-map。

- ShortFuse

Answer 3

Chrome 52版本已经修复了外部源映射的问题，但看起来你的开发工具与我的设置不同，我使用的是：

devtool: '#source-maps'

你是如何构建你的源代码的？如果你使用了-d，它会切换到内联源映射。

- Thomas Grainger

---

当你添加 # 时有什么区别？ - Andrei CACIO

'#'控制进入JS文件的指令。对于旧版本浏览器，您可以使用'@'：原始源映射规范使用'@'，但这与IE<11中的'条件编译'(通过@cc_on激活)冲突，它在注释中运行代码，并会导致以下类型的错误： - Thomas Grainger

完全不神秘 - Matt

@ThomasGrainger 这个在哪里有记录呢？在官方文档中并没有提到哈希或"@"符号: https://webpack.js.org/configuration/devtool/ - Tim