jsx react debugger not matching despite webpack source maps

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

1 Answers

Answers 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".

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati