How to pause the script execution in AngularJS exceptions using Chrome DevTools?
According to the Angular docs,
https://docs.angularjs.org/api/ng/service/$exceptionHandler
This example will override the normal action of $exceptionHandler, to make angular exceptions fail hard when they happen, instead of just logging to the console.
angular.module('exceptionOverride', []).factory('$exceptionHandler', function() { return function(exception, cause) { exception.message += ' (caused by "' + cause + '")'; throw exception; };});This will cause them to be handled by the browser dev tools, which will allow pause on caught exceptions, usage of source maps for nice stack traces, etc.
Presumably you don't want this to happen in production, and also don't want to have to add/remove this code continuously during development. We solve this secondary problem by having a 'dev' module which adds to and overrides our production code during development. For example:
In dev.html:
<html ng-app="devApp"> ...
In dev.js:
angular.module('devApp', ['mainApp']) .factory('$exceptionHandler', ...)
The "Skip stepping through sources" is no longer available in Chrome, but - there is a new option - you can right click any script in sources/sources and choose 'Blackbox script'. Then you can turn on 'Pause on Caught Exceptions' without worrying about jQuery and other errors. Personally I use it always on jquery.js and angular.js.
You can enable Skip stepping through sources with particular names in DevTools and set it to something like this:
(jquery|angular|diigolet)