Jsx reacts to a debugger not matching despite the original webpack maps

Question

I study React and JSX and use webpack to compile, but when I throw the “debugger” into my component, the line does not match when I’m on the Sources tab of Chrome Dev Tools (in general, the sources don’t reflect what I have is in my app.jsx file in general). The React tab also does not load. 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 download your html from a local file, not a webpack server, you need to enable the React Developer Tools extension option “Allow access to file URLs”.