Debugging my AngularJS app has become quite a challenge. I've utilized Grunt + uglify to concatenate and minify the application code, with the addition of a source map generated alongside the minified JS file.
The source map functions correctly when there's a JS error in a non-AngularJS part of the code. For instance, if I insert console.log('a.b');
at the beginning of a file, Chrome debugger reports the error with line and file details from the original file rather than the minified version.
However, things take a turn when an error occurs within Angular-related code (like Controller code). While Angular provides a clear stack trace, it only references the minified file instead of the original one.
I'm wondering if there's a solution that would prompt Angular to recognize the source map?
Here's a sample error for reference:
TypeError: Cannot call method 'getElement' of undefined
at Object.addMapControls (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:2848)
at Object.g [as init] (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:344)
at new a (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:591)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js:29:495)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js:30:123)