CODEWITHSUNDEEP
javascriptangularjsconsolefirebug
Brondahl
Brondahl

Reputation: 8547

Why won't Angular log to Firebug console

My codebase/dev environment has developed the following issue at some point in the last week or two:

Any error that is thrown by my javascript within Angular's realm of control doesn't get logged to the Firebug console.

============================

Details and Investigation:

I've tried both of the following for testing:

var x;
var y = x.test();

and 

throw new Error('test');

I would expect that both of these should behave in essentially the same way: JS stops executing and console prints an error message. In all cases in my testing both of these have behaved the same, so I'll just use the throw example below.

If I just throw at the start of an Angular script being included on a page (i.e. a .js file, which happens to make use of angular, and is in a <script> tag. Then I DO get my error. e.g.

var app = angular.module("AbiApp", []);

console.log('test1');       // I see this.
throw new Error('test2');   // I DO see this.
console.log('test3');       // I don't see this. (as expected)

app.controller('HomeController', ['$scope', function ($scope) {
});

If I through an error in a callback inside my Angular code (i.e. somewhere that isn't in Angular's normal realm of control; somewhere that I'd have to add $apply() to have changes be immediately updated) then, again, I DO get my Error, at the relevant point. e.g.

var app = angular.module("AbiApp", []);

app.controller('HomeController', ['$scope', function ($scope) {
    // We're using SignalR
    $.connection.hub.start().done(function () {
        console.log('test1');       // I see this.
        throw new Error('test2');   // I DO see this.
        console.log('test3');       // I don't see this. (as expected)
    });
});

But If I throw my error inside Angular's code (e.g. at the top the definition function of a controller) or if I deliberately mis-spell one of the dependencies for an Angular object. Then I DO NOT get any error on the console, but JS DOES stop executing. e.g.

app.controller('HomeController', ['$scope', function ($scope) {
    console.log('test1');       // I see this.
    throw new Error('test2');   // I don't see this. :(
    console.log('test3');       // I don't see this.
});

or

app.controller('HomeController', ['$scpe', function ($scope) {
                     //            *****         No error thrown.
    console.log('test1');       // I don't see this.
});

If I repeat in Chrome, then I get all my errors back. If I disable Firebug and open the Firefox Console, then I get all my errors back.

So I conclude that Angular has decided that it doesn't like my Firebug console, and therefore isn't logging to it unless I directly invoke console.log(). WTF?

I've tried:

No changes to symptoms in any of those cases.

Upvotes: 1

Views: 592

Answers (1)

Brondahl
Brondahl

Reputation: 8547

It isn't at all satisfactory, but I solve the problem by factory resetting Firebug.

The Firebug FAQ has a specific entry on "How do I reset all Firebug options":
Firebug Menu > Options > Reset All Firebug Options

Now I have all the errors in all the places.

If anyone is able to make a guess about what setting it might have been that I got into the wrong state I be keen to hear it!

Upvotes: 1

Related Questions