如何使console.log可配置

How to make console.log configurable

本文关键字：配置 log console 何使      更新时间：2023-09-26

在我的web应用程序中（客户端重，服务器端轻），在开发过程中，我需要做很多调试，console.log非常有用，但理想情况下，在生产中，一定不会显示任何调试消息，所以我计划添加以下代码：

window.production = false;  // set to true when in production mode.
if(window.production){    
    window.log = function(){};
}else{
    window.log = function(){
        console.log.apply(console, arguments);
    };
}    
//then replace all console.log(a, b, c, ...) into window.log(a, b, c, ...) in my code.

这是一个使调试可配置的好方法吗？还是我必须只制作一个grunt，它可以删除生产中的所有console.log行？

因此，如果您的唯一最终目标是不在生产中显示调试消息，那么您有大量的选项可供选择！您还应该决定以下内容对您是否重要：

  1. 能够执行日志语句之外的其他工作，这些工作也不应该在生产中运行
  2. 在生产中最小化文件大小，并且不发送日志记录代码
  3. 多个日志级别或不同的日志记录组
  4. 在生产中打开/关闭这些日志记录级别或组的能力
  5. 最小化您必须为每个日志语句键入的金额

在非常基本的层面上，简单地调用

if (window.console && window.console.log)
{
    window.log = console.log.bind(console); // function devnull() { };
}
else
{
    window.log = function() { };
}
log('This is a log!');

将足以让您打开/关闭登录。这将实现上面列表中的目标（5），并且效果非常好。

另一种可以很好地与uglify这样的可以删除死代码的迷你程序配合使用的解决方案是用这样的东西包围你的日志记录语句（然而，你可能不想污染全局命名空间）：

window.LogLevels =
{
    Off:        0x00000000,
    Error:      0x00000001,
    Warning:    0x00000002,
    Timing:     0x00000004,
    Data:       0x00000008,
    Status:     0x00000010,
    ...
    Verbose:    0x04000000,
};
window.LogLevel = LogLevels.Error | LogLevels.Warning;
window.ShouldLog = function(mask)
{
    return ((window.LogLevel & mask) === mask);
};
if (ShouldLog(LogLEvels.Error)) { log('This is an error!'); }

这将满足条件（1）、（3）和（4），并设置您以（5）为代价求解（2）。

再加上预定义的DEBUG常量（或类似的），在构建步骤中，您可以用regex:替换日志语句

productionCode = debugCode.replace(/ShouldLog'(((?!LogLevels'.Error|LogLevels'.Warning)[^)]*)')/g, 'DEBUG');

这将完全删除代码中的非错误和非警告级别日志记录，并满足（2）。你真的不想让别人偷看你的日志。。加上更好的性能！：）

奖金如果你想变得特别时髦，你可以使用以下方法（至少在Chrome中）为控制台中的每个日志记录语句获取堆栈跟踪。不再有"为什么这个日志被击中"！

window.log = function ()
{
    console.groupCollapsed.apply(console, arguments);
    var stack = new Error().stack.split(''n');
    for(var i = 2; i < stack.length; i ++)
    {
        // Trim and remove 'at ';
        console.log('%c' + stack[i].trim().substring(3), 'padding-left: 10px; color: #777');
    }
    console.groupEnd();
};

如果您使用的是像Gulp.js或Grunt.js这样的构建工具，那么有一些模块可以做到这一点：

  • gullow条调试
  • grunt条调试
相关文章：