CODEWITHSUNDEEP
javascriptangularjsgoogle-chrome
Felipe Leão
Felipe Leão

Reputation: 925

Angular's $log.debug() not showing on Chrome's console

Recently my Chrome Browser stopped showing $log.debug() messagens on console. I have been using this way of logging with angular, instead of console.log(), across all my controllers because it is easy to disable logging when I upload my scripts to production servers.

I have already checked my $logProvider configuration and debugEnabled() is set to true.

For some reason the only way of showing $log.debug() messages on chrome is enabling verbose messages on console filter. Until recently that was not necessary. Enabling verbose isn't nice, since console spits lots of other messages that I don't care about.

I'm currently using Chrome v60.0.3112.101 64 bits on a Windows 7 machine. Is it related to browser's version? Can I do something to make it show messages again without verbose mode?

Ps.: Firefox continues showing everything as always.

Upvotes: 10

Views: 6362

Answers (2)

Harshal Yeole
Harshal Yeole

Reputation: 4983

Figured that this solution works too ng serve -- configuration=dev

Found another thing in the angular.json file too.

sourceMap: true,
optimization: false,

Modifying his helped me to get debugger running as well.

Upvotes: 0

Estus Flask
Estus Flask

Reputation: 222309

console.debug log level is inconsistent between Chrome/Chromium versions. Console UI was changed in Chrome 58. Currently console.debug requires verbose level.

If other console entries are unwanted at this log level, console settings can be changed to User messages only:

console.debug

If this behaviour should be changed within particular page, console can be patched:

console.debug = console.log;

Considering that AngularJS $log service is an abstraction over console, and $log.debug was made dependent on debugEnabled state to distinguish it from $log.log, this can be fixed in less obtrusive manner in AngularJS application:

app
.config(['$provide', '$logProvider', ($provide, $logProvider) => {
  // expose a provider to reach debugEnabled in $log
  $provide.value('$logProvider', $logProvider);
})
.decorator('$log', ['$logProvider', '$delegate', ($logProvider, $delegate) => {
  // override $log.debug
  $delegate.debug = function () {
    if (!$logProvider.debugEnabled())
      return;
    $delegate.log.apply($delegate, arguments);
  }

  return $delegate;
}]);

Upvotes: 15

Related Questions