React debug in browser when using bundle.js

问题

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?

回答1:

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:

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'
      }
    ]
  }
};

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

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

回答2:

You can use the devtool option to 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.

For development, I set this option to eval-source-map or cheap-eval-source-map, and for production I either leave this off or generate separate source map files with source-map.

回答3:

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:

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: {}
}

check

来源：https://stackoverflow.com/questions/32826375/react-debug-in-browser-when-using-bundle-js

标签

javascript

debugging

reactjs

google-chrome-devtools

Webpack