使用bundle.js时在浏览器中重新调试 [英] React debug in browser when using bundle.js

问题描述

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

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

如何使用webpack如何在浏览器调试器中看到我的所有Javascript文件所以我可以做插入断点之类的东西？

解决方案

经过一段时间无意义地使用一堆打印语句后，我终于回过头来想办法如何做到这一点。 / p>

以下是捆绑后再次使用断点的方法：

1）

转到您的webpack.config.js文件并将devtools从true设置为source-map或其中一个@MichelleTilley在她的回答中解释的其他选项。

webpack.config.js（这是一个例子）

  module.exports = {
条目：./ js / app.js，
输出：{
文件名：js / bundle.js
}，
 debug：true，
 devtool：＃eval-source-map，
模块：{
加载器：[
 {
 test：/\ .jsx ？$ /，
不包括：/（node_modules | bower_components）/，
 loader：'babel'
} 
] 
} 
}; 
  

2）

同样@MichelleTilley在她的回答中解释说，您可能需要在Chrome中启用devtools选项。

3）

在此之后，当您进行调试时，您将拥有查找名为。的新文件夹。这是非常难以注意到的！

感谢下面的Stackoverflow回答，我发现该文件夹的位置已经找到了。

配置webpack以允许浏览器调试

Tools: Chrome Developer Tools, ReactJs and 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

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?

解决方案

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)

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(here is an example)

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)

Also like @MichelleTilley explained in her answer you may need to enable the devtools options in the Chrome.

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.

Configure webpack to allow browser debugging

这篇关于使用bundle.js时在浏览器中重新调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！