AngularJS中console.log与$log.info的区别及优劣对比

你观察得挺仔细的哈！在常规浏览器调试场景下，这两个方法的输出看起来确实没区别，但$log作为Angular官方提供的日志服务，其实还有不少console.log不具备的优势，给你一一拆解：

• 更好的可测试性
  这是框架服务最核心的价值之一。$log是可注入的依赖，在单元测试里你可以轻松mock它，比如验证某个日志方法是否被调用、传递的参数是否符合预期。而原生console.log是全局对象，测试时要拦截或断言它的调用，得搞不少hack手段，麻烦得多。

• 跨环境兼容性
  $log会自动适配不同的运行环境：比如在一些不支持console对象的老旧浏览器，或者服务器端渲染的场景中，$log会做降级处理，不会因为找不到console就抛出错误中断代码执行；但直接用console.log的话，很可能在这类环境里直接崩掉。

• 灵活的扩展性
  你可以通过Angular的装饰器（decorator）轻松扩展$log的功能，比如给所有日志统一加前缀、把日志同步到后端服务、根据环境过滤日志级别。举个简单的例子，给所有info日志加时间戳：

  app.config(function($provide) {
    $provide.decorator('$log', function($delegate) {
      const originalInfo = $delegate.info;
      $delegate.info = function(message) {
        originalInfo(`[${new Date().toISOString()}] INFO: ${message}`);
      };
      return $delegate;
    });
  });
  

  要是给console.log做全局扩展，很容易污染全局对象，还可能和其他第三方代码冲突，风险高多了。

• 统一的日志级别管控
  $log内置了debug、info、warn、error这些不同的日志级别，而且你可以通过$logProvider在配置阶段全局开关某些级别。比如生产环境不想输出debug日志，只需要一行配置：

  app.config(function($logProvider) {
    $logProvider.debugEnabled(false);
  });
  

  这样所有$log.debug的调用都会被静默，而原生console没有这种统一管控的能力，你得在代码里到处加环境判断，非常繁琐。

回到你给出的示例代码：

var url = "http://www.google.com"; 
console.log(url); 
$log.info(url);

确实在浏览器控制台的输出完全一致，但如果考虑到测试、跨环境、扩展这些场景，$log的优势就体现出来了。

内容的提问来源于stack exchange，提问作者CigarDoug