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

Posted 2023-03-07

【中文标题】使用 bundle.js 时在浏览器中进行反应调试

【英文标题】：React debug in browser when using bundle.js

【发布时间】：2015-12-25 21:28:40

【问题描述】：

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

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

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

【参考方案1】：

现在更新了，您只需在 module.exports 顶部包含 mode:"development" 并在 .js 文件中的任何位置设置调试器，它将工作并打开 chrome devtools 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

【讨论】：

“check”链接是 404...看起来“mode”属性不再是有效的语法...

@Andrew 现在的有效方法是什么？源映射是否足够？我从未尝试过它们，我知道它们有助于追溯错误的真正来源，但我正在寻找的是能够在 Chrome 中调试 bundle.js 文件，或者至少可以访问浏览器中的 src 文件而不是只是缩小了 bundle.js

链接现在有效，所以我收回我之前的声明。 webpack.js.org/configuration/mode。似乎是要走的路。

【参考方案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)

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

感谢下面的 *** 答案以及发布的图片，我终于找到了该文件夹的位置。

Configure webpack to allow browser debugging

【讨论】：

谁能告诉我启用哪些“Chrome 中的 devtools 选项”来完成这项工作？我让它在 FireFox 中工作，但在 Chrome 中，我可以以明文形式看到 javascript，但我的断点并没有停止。在 Firefox 中，捆绑的脚本非常杂乱，所以我喜欢 Chrome 在文件夹中显示它们的方式，但我必须先让它工作。

啊，我现在在 Chrome devtools 中看到“启用 JavaScript 源映射”和“启用 CSS 源映射”，并且默认情况下都选中了。有趣的是，经过一番尝试后，chrome 现在也可以正常工作了。去图吧。

" 'debug' 属性在 webpack 2.0.0 中被移除。"查看更新的答案。

【参考方案3】：

您可以使用 the devtool option 让 webpack 生成源映射，这 (when enabled in the Chrome devtools options) 将允许 Chrome 将 bundle.js 中的代码（甚至可能被缩小）转换为原始源代码。

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

【讨论】：

我记得有人强烈推荐“源地图”，我会尝试一下，告诉你进展如何！

我将这些添加到我的 webpack.config.js 文件 debug: true, devtool: "#eval-source-map" 中，并且在开发工具中为 js 启用了源映射，但我仍然只看到bundle.js