I am building a chrome-extension using react, webpack and babel. Webpack bundles html and js files into a folder from where chrome-extension is unpacked. In my webpack config file, I wanted to use the following option for debugging:
{
devtool: "source-map"
}
When a bundled file is opened in the browser: The above settings allows me to debugg the original code (rather generated/ bundled code) of html/js files when files are inspected in chrome-developer-tools in browser as normal file (not as an extension files). Here, the purpose of using 'devtool' settings in webpack is achieved.
After bundled files are unpacked as a chrome Extension: But while trying to inspect files (say popup.html) of chrome-extension, console (in chrome-developer-tool) shows bundled files (not the original code). So, the 'devtool' configuration option is not working here.
Where am I going wrong? Is there any additional settings requried in webpack configuration file, so that 'devtool' option can be used while debugging files of a chrome-extension?