search

samuelsimoes / chrome-extension-webpack-boilerplate

A basic foundation boilerplate for rich Chrome Extensions using Webpack to help you write modular and modern Javascript code, load CSS easily and automatic reload the browser on code changes.
MIT License
1.7k stars 347 forks source link

Debugging a Chrome Extension in development mode #60

Open duliba opened 5 years ago

duliba commented 5 years ago

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:

screen shot 2019-02-20 at 00 14 01

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 commented 4 years ago

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.

image

laiqun commented 2 years ago

hi duliba: You can try this way: image Then select file you want to debug: image