工具:Chrome开发者工具,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答案以及发布的图像,我终于找到了该文件夹的位置。