Debugging a Chrome Extension in development mode

[duliba]

I followed the instructions to start the development server in debug mode:
NODE_ENV=development npm run start

However, when I look at the source code in Chrome DevTools, everything seems to be bundled and optimized, and I don't even find some bundles:

From the image you can tell that the code is optimized, and that some bundles (like popup.bundle.js and options.bundle.js) don't even show up.

Any idea if there's a way around this to allow dynamic debugging?

Thanks :)

[samuelsimoes]

This code isn't the optimized code, this is the code that webpack generates in order to allow the hot reload compilation.

I don't understand exactly what do you want to mean with "dynamic debugging" but if you, for example, put a console.log('hello') on your code and click in the file line in the right, you get the code before the transpilation.

[laiqun]

hi duliba:
You can try this way:

Then select file you want to debug: