$log vs console.log() for debugging

When debugging AngularJS applications, developers often use either $log (AngularJS built-in service) or console.log() (native JavaScript function). While both serve the purpose of logging information to the console, $log offers additional benefits that make it more suitable for structured debugging in AngularJS applications.

---

1. Understanding $log in AngularJS

$log is an AngularJS service that wraps the native console methods (console.log, console.warn, console.error, etc.). It is injectable and provides better integration with AngularJS’s dependency injection system.

Example Usage of $log

angular.module('myApp', [])
.controller('myController', function($scope, $log) {
    $scope.message = "Hello, AngularJS!";
    $log.log("Standard log message");
    $log.info("Info message");
    $log.warn("Warning message");
    $log.error("Error message");
});

This outputs:
Standard log message
Info message
Warning message
Error message

---

2. $log vs console.log() – Key Differences

Feature	$log (AngularJS Service)	console.log() (Native JavaScript)
Dependency Injection	Yes, can be injected into components	No, must be used directly
Mocking & Testing	Easy to mock in unit tests using Angular’s $provide	Difficult to mock without overriding global console
Configurable Logging	Can be disabled or redirected via $logProvider	No built-in way to disable logs selectively
Log Levels	Supports .log(), .info(), .warn(), .error(), .debug()	Only console.log(), console.warn(), console.error()
Integration with AngularJS	Automatically handled inside AngularJS’s digest cycle	Not integrated; may not reflect scope changes instantly
Performance Considerations	Logging can be disabled in production using $logProvider	Needs manual removal from production code

---

3. Configuring $log with $logProvider

In AngularJS, $logProvider allows you to enable or disable logs in different environments.

Example: Disable Debug Logs in Production

angular.module('myApp', [])
.config(function($logProvider) {
    $logProvider.debugEnabled(false); // Disable debug logs in production
});

• This prevents unnecessary log clutter in production environments.
• console.log() has no equivalent built-in way to disable logs selectively.

---

4. Mocking $log in Unit Tests

Since $log is injectable, it is easier to mock in unit tests, unlike console.log(), which directly affects the global console.

Example: Mocking $log in Tests

describe('myController', function() {
    var $log, $controller, $scope;

    beforeEach(module('myApp'));

    beforeEach(inject(function(_$log_, _$controller_, $rootScope) {
        $log = _$log_;
        $scope = $rootScope.$new();
        $controller = _$controller_('myController', { $scope: $scope, $log: $log });
    }));

    it('should log an info message', function() {
        spyOn($log, 'info');
        $log.info("Test Info Message");
        expect($log.info).toHaveBeenCalledWith("Test Info Message");
    });
});

$log can be easily spied on and verified in tests.
console.log() is hard to mock and should be avoided in tests.

---

5. When to Use $log vs console.log()

Scenario	Use $log	Use console.log()
Debugging within AngularJS apps	Yes	No
Unit testing and mocking logs	Yes	No
Quick debugging outside AngularJS	No	Yes
Production-ready logging with toggle	Yes	No
Logging outside AngularJS scope	No	Yes