Having source code for third party javascript libraries available whilst debugging

Question

I would like to know whether it is possible to have third-party javascript libraries' source code available whilst debugging.

FYI, I use npm/nodejs and the angular CLI (which itself relies on Webpack).

Example libraries (together with their source languages) that I would like to have available during debugging are:

• Angular 2 (typescript)
• RxJS (typescript)

I guess what I want to achieve is related to configuring source maps.

Any comment or guidance welcome.

edit: Can someone please advise how to configure the angular CLI in order to have angular and RxJS typescript sources available whilst debugging?

Answer 1

Yes, to be able to set breakpoints in source files while debugging, you need sourcemaps. But this is not the thing that can be configured in the IDE, you need to set up your build tools accordingly. The only thing that should be configured on the IDE end is the run configuration - you might need to specify Remote URL mappings for your project directories

Answer 2

To complement lena's answer and as of @angular/cli version's 6.1 is it now possible to output source maps for vendor libraries using the following syntax:

ng serve --source-map --vendor-source-map

It also works for the ng build command.

See also: https://blog.ninja-squad.com/2018/07/27/angular-cli-6.1/

It is then possible to debug third-party libraries using an IDE or the browser.