javascript 使用 bundle.js 时在浏览器中反应调试
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32826375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React debug in browser when using bundle.js
提问by Nick Pineda
Tools: Chrome Developer Tools, ReactJs and Webpack
工具：Chrome 开发者工具、ReactJs 和 Webpack
Maybe it was when I switched to bundling with webpack, but initially when I started my project I was able to bundle my js into a bundle.js file but still have access to the files in the browser debugging tool. Now all I see in the browser in my js folder is bundle.js
也许是当我切换到与 webpack 捆绑时，但最初当我开始我的项目时，我能够将我的 js 捆绑到一个 bundle.js 文件中，但仍然可以访问浏览器调试工具中的文件。现在我在浏览器中的 js 文件夹中看到的只是 bundle.js
Using webpack how do I get back to being able to see all my Javascript files in the browser debugger so I can do stuff like insert breakpoints?
使用 webpack 我如何才能在浏览器调试器中看到我所有的 Javascript 文件，以便我可以执行诸如插入断点之类的操作？
采纳答案by Nick Pineda
After a long time of pointlessly using a bunch of print statements I finally went back and figured out how to do this.
在长时间无意义地使用一堆打印语句之后，我终于回去想出了如何做到这一点。
Here is how you get your ability to use breakpoints again after you bundle:
以下是您如何在捆绑后再次使用断点的能力：
1)
1)
Go to your webpack.config.js file and set devtools from "true" to "source-map" or one of the other options that @MichelleTilley explained in her answer.
转到您的 webpack.config.js 文件并将 devtools 从“true”设置为“source-map”或@MichelleTilley 在她的回答中解释的其他选项之一。
webpack.config.js(here is an example)
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)
2)
Also like @MichelleTilley explained in her answer you may need to enable the devtools options in the Chrome.
也像@MichelleTilley 在她的回答中解释的那样，您可能需要在 Chrome 中启用 devtools 选项。
3)
3)
After this the when you go to debug you will have to look for a new folder just named "." that is super hard to notice!
在此之后，当您进行调试时，您将不得不寻找一个名为“.”的新文件夹。这是超级难以注意到！
Thanks to the Stackoverflow answer below with the posted images I finally found where that folder was.
感谢下面的 Stackoverflow 回答以及发布的图片，我终于找到了那个文件夹的位置。
回答by Michelle Tilley
You can use the devtooloptionto have webpack generate source maps, which (when enabled in the Chrome devtools options) will allow Chrome to translate the code in bundle.js(which may even be minified) into the original source code.
您可以使用该devtool选项让 webpack 生成源映射，该选项（在 Chrome devtools 选项中启用时）将允许 Chrome 将代码bundle.js（甚至可能被缩小）转换为原始源代码。
For development, I set this option to eval-source-mapor cheap-eval-source-map, and for production I either leave this off or generate separate source map files with source-map.
对于开发，我将此选项设置为eval-source-map或cheap-eval-source-map，而对于生产，我要么关闭此选项，要么生成带有source-map.
回答by badar
Its updated now you have to just include mode:"development" in top of module.exports and set a debugger in any where in your .js file it will work and open chrome devtools
webpack.config.js:
它现在更新了，您只需在 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: {}
}
