Javascript 使用bundle.js时在浏览器中响应调试

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

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

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

您可以使用webpack生成源代码映射，这（）将允许Chrome将

bundle.js

中的代码（甚至可以缩小）转换为原始源代码

---

对于开发，我将此选项设置为

eval source map

或

便宜的eval source map

，对于生产，我要么关闭此选项，要么使用

source map

生成单独的源代码映射文件。在长时间毫无意义地使用一堆打印语句之后，我最终返回并找到了如何执行此操作的方法

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

1）

转到您的webpack.config.js文件，将devtools从“true”设置为“source map”，或@MichelleTilley在回答中解释的其他选项之一

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

2）

正如@Micheletilley在她的回答中解释的那样，您可能需要在Chrome中启用devtools选项

3）

在这之后，当你去调试你将不得不寻找一个新的文件夹刚刚命名为“.”这是超级难以注意

多亏了下面的Stackoverflow答案和发布的图片，我终于找到了文件夹所在的位置

---

它现在已经更新，您只需在module.exports的顶部包含模式：“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: {}
}

---

我记得有人极力推荐“源地图”，我会试试看，让你知道它是怎么回事！我将这些添加到我的webpack.config.js文件debug:true，devtool:“#eval source map”，并且在开发工具中，source map为js启用，但我仍然只看到bundle.js。有人能告诉我是哪个吗“Chrome中的devtools选项”来实现这一功能？我在FireFox中实现了这一功能，但在Chrome中，我可以清晰地看到javascript，但我的断点并没有停止。在FireFox中，捆绑的脚本非常混乱，所以我喜欢Chrome在文件夹中显示它们的方式，但我必须首先让它工作。啊，我看到了“启用javascript源代码映射”Chrome开发工具中的“启用CSS源代码映射”和“启用CSS源代码映射”，默认情况下这两个选项都处于选中状态。有趣的是，在玩了一些游戏之后，chrome现在也开始工作了。如图所示，“调试”属性已在Webpack2.0.0中删除。请参阅更新的答案。“检查”链接是404。。。看起来“mode”属性不再有效sytax…@Andrew现在有效的方法是什么？源地图足够吗？我从未尝试过它们，我知道它们有助于追溯错误的真正根源，但我要寻找的是能够在Chrome中调试bundle.js文件，或者至少能够在浏览器中访问src文件，而不仅仅是缩小bundle.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: {}
}