Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debugging imported Angular library in chrome dev tools

I'm working on an Angular project with angular-cli as the base. I've imported a library in package.json and I'd like to step through the library in the Chrome dev tools debugger. How can I make the libraries original typescript source show up in dev tools? I assume this is related to some webpack configuration?

like image 790
HighLife Avatar asked Apr 18 '17 15:04

HighLife


People also ask

How do I debug Angular apps with Chrome DevTools?

You can find the JavaScript Debugger under the sources tab of the ChromeDev Tools. As you look for bugs in your Angular code, this tool allows you to set breakpoints and inspect your code at runtime. It also gives you the capability to obtain the value of your variables at different points in time.

How do I debug Angularjs in Chrome?

If you're using Chrome, we can use a shortcut with the developer tools. Simply find the element you're interested in, right click on it in the browser, and select inspect element. The element itself is stored as the $0 variable, and we can fetch the Angular-ized element by calling: angular.


1 Answers

Newer versions of the CLI have the "vendorSourceMap" option.

ng build --vendor-source-map

See https://github.com/angular/angular-cli/wiki/build

like image 101
Juan M. Medina Avatar answered Sep 22 '22 02:09

Juan M. Medina