如何在AngularJS中获得更多的stacktrace

I'm using the decorator to change the $exceptionHandler behavior, sending logs to the server. My problem with this is that the stackatrace of the exceptions seems useless, showing only part of the stack. For example:

我正在使用decorator更改$exceptionHandler行为，向服务器发送日志。我的问题是，这些异常的stackatrace似乎是无用的，只显示堆栈的一部分。例如:

Syntax Error: Token 'undefined' not a primary expression at column NaN of the expression [expression here].

语法错误:令牌'undefined'不是表达式[表达式]第NaN列的主表达式。

at Error (native)
at throwError (http://localhost:8080/angular/angular.js:6674:62)
at primary (http://localhost:8080/angular/angular.js:6918:9)
at unary (http://localhost:8080/angular/angular.js:6900:14)
at multiplicative (http://localhost:8080/angular/angular.js:6883:16)
at additive (http://localhost:8080/angular/angular.js:6874:16)
at relational (http://localhost:8080/angular/angular.js:6865:16)
at equality (http://localhost:8080/angular/angular.js:6856:16)
at logicalAND (http://localhost:8080/angular/angular.js:6847:16)
at logicalOR (http://localhost:8080/angular/angular.js:6839:41)

Is there some way to configure AngularJS to show more stacks? If I look at Chrome console, I can see more stack, and get the filename, but not in the exception handler.

有没有什么方法可以配置AngularJS来显示更多的堆栈?如果我查看Chrome控制台，我可以看到更多的堆栈，并获得文件名，但不在异常处理程序中。

Even if I change the Error limit I cannot see the original file:

即使我更改了错误限制，我也看不到原始文件:

Error.stackTraceLimit = Infinity;

1 个解决方案

#1

1 Use a debugger, instead Chrome console

Google Chrome provides a debugger that helps JS programmers to find bugs and problematic code.

谷歌Chrome提供了一个调试器，可以帮助JS程序员找到bug和有问题的代码。

As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently. The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful.

随着JavaScript应用程序的复杂性增加，开发人员需要强大的调试工具来帮助快速发现问题的原因并有效地解决问题。Chrome DevTools包含了许多有用的工具，可以帮助调试JavaScript。

You can try putting some breakpoints wherever you want (try to detect the problematic lines/ methods).

您可以尝试在您想要的地方放置一些断点(尝试查找有问题的行/方法)。

See the official documentation here: https://developer.chrome.com/devtools/docs/javascript-debugging

请参阅这里的官方文档:https://developer.chrome.com/devtools/docs/javascript调试

2 Use a browser extension

Many plugins like ng-inspector (https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj?hl=en) or AngularJS Batarang (https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en) helps you to print the status of your AngularJS program (controller instances, variable names/values and scopes).

许多插件如ng-inspector (https://chrome.google.com/webstore/detail/ninspector -for angularj/aadgmnobgmigamgmigaicncmoeflnamj?

3 Use $log service (console.log wrapper)

The AngularJS $log service provides a simple resource to print the status of your variables in the browser console (if present).

AngularJS $log服务提供了一个简单的资源，用于在浏览器控制台(如果存在)打印变量的状态。

Simple service for logging. Default implementation safely writes the message into the browser's console (if present).

简单的服务记录。默认实现将消息安全地写入浏览器的控制台(如果存在)。

The main purpose of this service is to simplify debugging and troubleshooting.

此服务的主要目的是简化调试和故障排除。

The default is to log debug messages. You can use ng.$logProvider#debugEnabled to change this. AngularJS $log service helps you to debug your program.

默认情况是记录调试消息。您可以使用ng。$ logProvider # debugEnabled改变这一点。$log服务帮助您调试程序。

---

From my personal point of view, a good AngularJS debug includes the combination of all above solutions.

从我个人的观点来看，一个好的AngularJS调试包含了上述所有解决方案的组合。

I hope it is useful for you.

我希望它对你有用。