Angular stacktrace in Firefox with Firebug

Question

I am developing a webapp in Angular and I am using Firefox with Firebug for debugging.

Whenever an error appears in my Angular, it cannot display stacktrace correctly. Instead, it shows something like this in console.log:

In Chrome, I get a beautiful glass with the ability to click on the error definition:

Am I forced to switch to Chrome for development in Angular, or is there a fix for this?

Answer 1

Try replacing the mini version of Angular with a non-minified one.
If this is an injection problem, you will have more meaningful feedback in the console.
As a more general answer, the best tools for debugging Angular are AngularJS Batarang and ng-inspector and, yes, these are Chrome extensions.

Answer 2

There is a unique add-on for firefox called AngScope , which is unofficial but seems very useful when debugging angular.js in firefox. If you don't want to switch to chrome, it's worth a try.

Answer 3

Instead of replacing angular.min.js with angular.js, you can make both files available with angular.min.js.map. Firefox recognizes the source map file and pulls out the best error message and stack trace from a non-minified source.

Answer 4

You need to switch to Chrome Developer Tools for a better stack trace. However, there may be a plugin / extension for Firefox that cleans things up for you, so make sure you do a little research before deciding.

But when comparing vanilla with vanilla, Chrome is what you want.

Answer 5

In Firebug, you can get the same error link definition function when you include angular.js in your web application. Firebug can display the line numbers (in which the part error occurred) for your Angular application.