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)?

OriEng · Accepted Answer · 2021-05-10 19:24:54Z

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/

answered May 10, 2021 at 19:24

OriEng

1,5831 gold badge21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andres martinez Over a year ago

thanks devtool: "inline-source-map" works for me !!

Collectives™ on Stack Overflow

How can I debug an npm module compiled with webpack?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related