jsx react debugger not matching despite webpack source maps

Question

I'm learning React and JSX and using webpack to compile but when I throw in 'debugger' into my component, the line isn't matched when I'm in Chrome Dev Tools' Sources tab (in general the sources doesn't reflect what I have in my app.jsx file at all). The React tab doesn't really load up either. Below is my webpack.config:

module.exports = {
  context: __dirname,
  entry: "./api_assignment.jsx",
  output: {
    path: "./",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react']
        }
      }
    ]
  },
  devtool: 'source-map',
  resolve: {
    extensions: ["", ".js", ".jsx"]
  }
};

//Webpack screenshot

Answer 1

If you are loading your html from local file and not webpack server, you need to enable React Developer Tools extension option "Allow access to file URLs".