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

Question

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

也许是当我切换到使用 webpack 捆绑时，但最初当我开始我的项目时，我能够将我的 js 捆绑到一个 bundle.js 文件中，但仍然可以访问浏览器调试工具中的文件.现在我在 js 文件夹中的浏览器中看到的是 bundle.js

使用 webpack 如何恢复在浏览器调试器中查看我的所有 Javascript 文件，以便我可以执行诸如插入断点之类的操作？

Answer 1

您可以使用 the devtool option to have webpack generate source maps, which (when enabled in the Chrome devtools options) 将允许 Chrome 将 bundle.js 中的代码（甚至可以缩小）翻译成原始源代码。

对于开发，我将此选项设置为 eval-source-map 或 cheap-eval-source-map，对于生产，我要么将其关闭，要么使用 source-map.[=16= 生成单独的源映射文件]

Answer 2

经过长时间毫无意义地使用一堆打印语句后，我终于回过头来想出如何做到这一点。

以下是您如何在捆绑后再次使用断点的方法：

1)

转到您的 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'
      }
    ]
  }
};

2)

也像@MichelleTilley 在她的回答中解释的那样，您可能需要在 Chrome 中启用 devtools 选项。

3)

在此之后，当您进行调试时，您将不得不寻找一个名为“.”的新文件夹。很难注意到！

感谢下面的 Whosebug 回答和发布的图片，我终于找到了那个文件夹的位置。

Configure webpack to allow browser debugging

Answer 3

它现在已更新，您只需在 module.exports 顶部包含模式："development"，并在 .js 文件中的任何位置设置调试器，它将运行并打开 chrome开发工具
webpack.config.js:

const path = require('path')
module.exports = {
    mode: 'development',
entry: path.join(__dirname,'src/js','index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
      filename: 'build.js'
   },
  module: {}
}

check

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

React debug in browser when using bundle.js

javascript

debugging

google-chrome-devtools

reactjs

webpack