如何在AngularJS中获得更多的堆栈跟踪 [英] How can I get more stacktrace in AngularJS

问题描述

我正在使用装饰器更改 $ exceptionHandler 行为，将日志发送到服务器。我的这个问题是，异常的栈栈似乎没用，只显示了一部分堆栈。例如：

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

  at Error（native）
 at throwError（http：// localhost：8080 / angular / angular.js ：6674：62）
 at primary（http：// localhost：8080 / angular / angular.js：6918：9）
一元（http：// localhost：8080 / angular / angular.js ：6900：14）
在乘法（http：// localhost：8080 / angular / angular.js：6883：16）
加法（http：// localhost：8080 / angular / angular.js ：6874：16）
在关系（http：// localhost：8080 / angular / angular.js：6865：16）
相等（http：// localhost：8080 / angular / angular.js ：6856：16）
 at logicalAND（http：// localhost：8080 / angular / angular.js：6847：16）
在logicalOR（http：// localhost：8080 / angular / angular.js ：6839：41）
  

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

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

  Error.stackTraceLimit = Infinity; 
  

解决方案

1使用调试器，而不是Chrome控制台

Google Chrome提供了一个调试器，可帮助JS程序员查找错误和有问题的代码。

随着JavaScript应用程序的复杂性增加，开发人员需要
强大的调试工具，以帮助您快速发现
问题的原因，并有效地解决这个问题。 Chrome DevTools包含一些
有用的工具，可帮助调试JavaScript不那么痛苦。

您可以尝试放置一些断点无论你想要什么（尝试检测问题线/方法）。

请参阅官方文档： https://developer.chrome.com/devtools/docs/javascript-debugging

2使用浏览器扩展程序

许多插件，如 ng-inspector （ https：// chrome .google.com / webstore / detail / ng-inspector-for-angularj / aadgmnobpdmgmigaicncghmmoeflnamj？hl = en ）或 AngularJS Batarang （ https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en ）可帮助您打印AngularJS程序的状态（控制器实例，变量名称/值a 3）使用$ log服务（console.log wrapper）

AngularJS $日志服务提供了一个简单的资源来在浏览器控制台（如果存在）中打印变量的状态。

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

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

默认是日志调试消息。你可以使用
ng。$ logProvider＃debugEnabled来改变这个。 AngularJS $ log service
可帮助您调试程序。

---

从我个人的观点，一个很好的AngularJS调试包括以上所有解决方案的组合。

希望对您有用。

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:

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

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.

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

Error.stackTraceLimit = Infinity;

解决方案

1 Use a debugger, instead Chrome console

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

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.

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

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).

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).

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.

---

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

I hope it is useful for you.

这篇关于如何在AngularJS中获得更多的堆栈跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！