工具:Chrome Developer Tools,ReactJs和Webpack
也许是当我切换到与webpack捆绑在一起,但是最初当我开始我的项目时,我能够将我的js绑定到一个bundle.js文件,但仍然可以访问浏览器调试工具中的文件.现在我在js文件夹的浏览器中看到的是bundle.js
使用webpack我如何恢复能够看到浏览器调试器中的所有Javascript文件,所以我可以做插件断点的东西?
解决方法
经过很长时间的无意义地使用一堆打印声明,我终于回头了解如何做到这一点.
以下是捆绑后再次使用断点的能力:
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)
之后,当你去调试,你将不得不寻找一个刚刚命名为“”的新文件夹.那是超级注意!
感谢Stackoverflow的答案下面发布的图像我终于找到那个文件夹的位置.