使用bundle.js在浏览器中进行调试

Z时代
2024-01-10
分类：问答

工具：Chrome开发者工具，ReactJs和Webpack

也许是当我切换到与webpack捆绑在一起的时候，但是最初当我启动我的项目时，我能够将我的js捆绑到bundle.js文件中，但仍然可以在浏览器调试工具中访问这些文件。现在我在浏览器中的js文件夹中看到的是bundle.js

使用webpack，我如何回到能够在浏览器调试器中查看所有Javascript文件的位置，以便执行插入断点之类的操作？

回答：

在长时间使用一堆打印语句毫无意义之后，我终于回过头来，弄清楚了如何做到这一点。

转到您的webpack.config.js文件，并将devtools从“ true”设置为“ source-

map”或@MichelleTilley在回答中解释的其他选项之一。

webpack.config.js（这里是一个示例）

module.exports = {
  entry: "./js/app.js",
  output: {
    filename: "js/bundle.js"
  },
  debug: true,
  devtool: "#eval-source-map",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel'
      }
    ]
  }
};