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?
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.
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.
Newer versions of the CLI have the "vendorSourceMap" option.
ng build --vendor-source-map
See https://github.com/angular/angular-cli/wiki/build
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With