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