How can I debug an npm module compiled with webpack?

Question

Is there a way to put breakpoints and execute the code step-by-step in the code of an npm module which is compiled with webpack?

The compiled code is not that useful for debugging and when the module is imported locally with npm link, only the compiled code is accessed from an application using the module.

How to do this in VSCode (or in any other code editor/ide)?

Answer 1

you can debug that easily in the browser if you add this row to webpack.config file:

  devtool: "inline-source-map"

and then run the scripts in dev mode:

--mode development

Then, if you set the debugger keyword in your npm package and run that in your main project you will see the full code:

I found another very good article about that topic if you want to learn more https://blog.jakoblind.no/debug-webpack-app-browser/