Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to debug type conversion errors in AngularJS?

Tags:

angularjs

I'm a javascript noob and trying to learn angular.

I have some simple angularJS code like this:

<div ng-controller="todoController">
    <span> temp = {{tempVal()}} </span>
</div>

the bug is easy enough, tempVal is a string, not a method.

My problem (and question) is, how do I discover this fact when debugging?

I am using Chrome and have the Batarang extension installed, however all I get is a cryptic stack trace:

TypeError: string is not a function
at http://localhost:6202/lib/angular-1.0.4/angular.js:6213:13
at Object.$interpolate.fn (http://localhost:6202/lib/angular-1.0.4/angular.js:4829:22)
at Object.watchExpression (http://localhost:6202/AddSomeControl/index.html:416:29)
at Object.Scope.$digest (http://localhost:6202/lib/angular-1.0.4/angular.js:7783:38)
at Object.Scope.$apply (http://localhost:6202/lib/angular-1.0.4/angular.js:7991:24)
at Object.$delegate.__proto__.$apply (http://localhost:6202/AddSomeControl/index.html:500:30)
at http://localhost:6202/lib/angular-1.0.4/angular.js:932:13
at Object.invoke (http://localhost:6202/lib/angular-1.0.4/angular.js:2813:25)
at bootstrap (http://localhost:6202/lib/angular-1.0.4/angular.js:930:12)
at angularInit (http://localhost:6202/lib/angular-1.0.4/angular.js:906:5) angular.js:5601

I'm stuck trying to figure out how, using these tools in a complex application, I could discover that the error is somewhere around that tempVal() line.

i tried setting a break point right when the error is being logged and looked up the callstack, and see a caught exception in $get.Scope.$digest that can maybe tell me the parent scope id (this.target.$id), along with what "watcher" (this.length) it is that crashed, and the previous completed html element (this.value).... is that the best way? what a pain :(

like image 273
JasonS Avatar asked Feb 07 '13 08:02

JasonS


1 Answers

the answer, unfortunatly, is that you can't debug this class of errors.

well, you can, it's called "learn the angular compiler/vm and debug it"

there's no dev-user friendly wrapping of these types of usage errors.

like image 196
JasonS Avatar answered Sep 19 '22 01:09

JasonS