如何使用 Chrome DevTools 在 AngularJS 异常中暂停脚本执行？

Posted 2023-03-07

【中文标题】如何使用 Chrome DevTools 在 AngularJS 异常中暂停脚本执行？

【英文标题】：How to pause the script execution in AngularJS exceptions using Chrome DevTools?

【发布时间】：2013-11-27 05:45:19

【问题描述】：

我知道 AngularJS 默认捕获所有应用程序异常，然后将它们记录到控制台。这使得 Chrome（我经常使用）中的“暂停未捕获的异常”按钮毫无用处。

很多时候我在我的代码中遇到小的 javascript 错误（比如访问未定义变量的成员），我真的习惯于暂停异常并检查情况。

我现在唯一的解决方案是在触发错误的代码上放置一个断点（不切实际）或使用“暂停所有异常”按钮，但我必须继续处理默认生成的所有错误通过 jQuery、Angular 和其他框架，这也很讨厌。

我也尝试过覆盖 $exceptionHandler 服务，并在其中设置断点，但我无法从生成错误的函数中的调用堆栈访问。

那么，是否可以在 AngularJS 应用程序中使用“暂停未捕获的异常”？

【参考方案1】：

您可以在 DevTools 中启用Skip stepping through sources with particular names 并将其设置为如下内容：

(jquery|angular|diigolet)

【讨论】：

这似乎没有解决实际问题 - 您不能在 Angular 代码中“暂停未捕获的异常”，因为 Angular 会捕获异常并且不会重新抛出它们。我猜（基于对这个问题的另一个答案）如果启用该模式，您可以使用它来减少必须跳过的无关捕获异常的数量。

【参考方案2】：

Chrome 中不再提供“跳过源代码”，但是 - 有一个新选项 - 您可以右键单击源/源中的任何脚本并选择“黑盒脚本”。然后你就可以打开'Pause on Caught Exceptions'，而不用担心 jQuery 和其他错误。就我个人而言，我总是在 jquery.js 和 angular.js 上使用它。

【参考方案3】：

根据 Angular 文档，

https://docs.angularjs.org/api/ng/service/$exceptionHandler

这个例子会覆盖 $exceptionHandler 的正常动作，来 使角度异常在发生时很难失败，而不仅仅是 登录到控制台。

angular.module('exceptionOverride', []).factory('$exceptionHandler', function() 
  return function(exception, cause) 
    exception.message += ' (caused by "' + cause + '")';
    throw exception;
  ;
);

这将导致它们由浏览器开发工具处理，这将允许暂停捕获的异常、使用源映射来获得良好的堆栈跟踪等。

大概您不希望在生产中发生这种情况，也不希望在开发过程中不断添加/删除此代码。我们通过在开发过程中添加并覆盖我们的生产代码的“开发”模块来解决这个次要问题。例如：

在 dev.html 中：

...

在 dev.js 中：

angular.module('devApp', ['mainApp']) .factory('$exceptionHandler', ...)