Следует ли мне удалить console.log из производственного кода?

В настоящее время в моем коде есть этот JS-оператор:

window.console && console.log("Foo");

Мне интересно, стоит ли это вообще дорого или имеет какие-либо отрицательные побочные эффекты при производстве.

Могу ли я оставить вход на стороне клиента или он должен уйти?

РЕДАКТИРОВАТЬ: В конце концов, я полагаю, что лучший аргумент, который я (и кто-либо еще?) Мог бы придумать, заключается в том, что существует, возможно, немаловажное количество дополнительных данных, передаваемых между сервером и клиентом, оставляя сообщения журнала оставленными. Если производственный код должен быть полностью оптимизирован, ведение журнала необходимо удалить, чтобы уменьшить размер javascript, отправляемого клиенту.

Вам не следует добавлять инструменты разработки на рабочую страницу.

Чтобы ответить на другой вопрос: код не может иметь отрицательного побочного эффекта:

• window.consoleбудет оцениваться как false, если consoleне определено
• console.log("Foo")будет выводить сообщение на консоль, когда оно определено (при условии, что страница не перезаписывается console.logне-функцией).

Другой способ справиться с этим - «заглушить» объект консоли, когда он не определен, чтобы не возникало ошибок в контекстах, в которых нет консоли, т.е.

if (!window.console) {
  var noOp = function(){}; // no-op function
  console = {
    log: noOp,
    warn: noOp,
    error: noOp
  }
}

вы поняли ... есть много функций, определенных в различных реализациях консоли, поэтому вы можете заглушить их все или только те, которые вы используете (например, если вы только когда-либо использовали console.logи никогда не использовали console.profileи console.timeт. д.)

Для меня это лучшая альтернатива при разработке, чем добавление условных обозначений перед каждым вызовом или их неиспользование.

см. также: Оставлять вызовы console.log () в коде JavaScript в вашем продукте - плохая идея?

UglifyJS2

Если вы используете этот минификатор, вы можете установить drop_consoleопцию :

Передайте true, чтобы отклонить вызовы функций console. *

Поэтому я бы посоветовал оставить console.logвызовы как есть для самой сложной части кодовой базы.

Если минификация является частью процесса сборки, вы можете использовать ее для удаления кода отладки, как описано здесь с помощью компилятора закрытия Google: Исключить код отладки JavaScript во время минификации

if (DEBUG) {
  console.log("Won't be logged if compiled with --define='DEBUG=false'")
}

Если вы компилируете с расширенной оптимизацией, этот код даже будет идентифицирован как мертвый и полностью удален.

Да. console.log вызовет исключение в браузерах, которые его не поддерживают (объект консоли не будет найден).

Как правило, да, это не лучшая идея выставлять сообщения журнала в производственном коде.

В идеале вы должны удалить такие сообщения журнала с помощью сценария сборки перед развертыванием; но многие (большинство) людей не используют процесс сборки (включая меня).

Вот небольшой фрагмент кода, который я использовал в последнее время для решения этой дилеммы. Он исправляет ошибки, вызванные неопределенным значением consoleв старом IE, а также отключает ведение журнала в "development_mode".

// fn to add blank (noOp) function for all console methods
var addConsoleNoOp =  function (window) {
    var names = ["log", "debug", "info", "warn", "error",
        "assert", "dir", "dirxml", "group", "groupEnd", "time",
        "timeEnd", "count", "trace", "profile", "profileEnd"],
        i, l = names.length,
        noOp = function () {};
    window.console = {};
    for (i = 0; i < l; i = i + 1) {
        window.console[names[i]] = noOp;
    }
};

// call addConsoleNoOp() if console is undefined or if in production
if (!window.console || !window.development_mode) {
    this.addConsoleNoOp(window);
}

Я почти уверен, что взял большую часть приведенного выше addConsoleNoOpf'n из другого ответа на SO, но не могу найти прямо сейчас. Я добавлю ссылку позже, если найду.

edit: Не тот пост, о котором я думал, но вот аналогичный подход: https://github.com/paulmillr/console-polyfill/blob/master/index.js

var AppLogger = (function () {
  var debug = false;
  var AppLogger = function (isDebug) {
    debug = isDebug;
  }
  AppLogger.conlog = function (data) {
    if (window.console && debug) {
        console.log(data);
    }
  }
  AppLogger.prototype = {
    conlog: function (data) {
        if (window.console && debug) {
            console.log(data);
        }
    }
  };
return AppLogger;
})();

Применение:

var debugMode=true;
var appLogger = new AppLogger(debugMode);
appLogger.conlog('test');

Да, это хорошая практика для использования console.logдля целей отладки javascript, но ее необходимо удалить с производственного сервера или, при необходимости, можно добавить на производственный сервер с учетом некоторых ключевых моментов:

**var isDebugEnabled="Get boolean value from Configuration file to check whether debug is enabled or not".**
if (window.console && isDebugEnabled) {
    console.log("Debug Message");
}

Вышеупомянутый блок кода должен использоваться везде для ведения журнала, чтобы сначала проверить, поддерживается ли консоль для текущего браузера и включена ли отладка или нет.

isDebugEnabled должен быть установлен как истина или ложь в зависимости от нашей среды.

TL; DR

Идея: ведение журнала объектов предотвращает их сборку мусора.

Детали

1. Если вы передаете объекты, console.logто эти объекты будут доступны по ссылке из консоли DevTools. Вы можете проверить это, зарегистрировав объект, изменив его и обнаружив, что старые сообщения отражают более поздние изменения объекта.
2. Если журналы слишком длинные, старые сообщения удаляются в Chrome.
3. Если журналы короткие, старые сообщения не удаляются, если эти сообщения ссылаются на объекты, то эти объекты не собираются мусором.

Это просто идея: я проверил пункты 1 и 2, но не 3.

Решение

Если вы хотите вести журналы для устранения неполадок на стороне клиента или других нужд, то:

['log', 'warn', 'error'].forEach( (meth) => {
  const _meth = window.console[meth].bind(console);
  window.console[meth] = function(...args) { _meth(...args.map((arg) => '' + arg)) }
});

Я в основном перезаписываю функцию console.log той, которая знает, где запускается код. Таким образом, я могу продолжать использовать console.log, как всегда. Он автоматически знает, что я нахожусь в режиме dev / qa или на производстве. Также есть способ заставить его. Вот рабочая скрипка. http://jsfiddle.net/bsurela/Zneek/

Вот фрагмент, поскольку люди, публикующие jsfiddle, намекают на переполнение стека.

  log:function(obj)
{
    if(window.location.hostname === domainName)
    {
        if(window.myLogger.force === true)
        {
            window.myLogger.original.apply(this,arguments);
        }
    }else {
        window.myLogger.original.apply(this,arguments);
    }
},

Я знаю, что это довольно старый вопрос, и в последнее время не было особой активности. Я просто хотел добавить свое решение, которое, похоже, мне подходит.

    /**
     * Logger For Console Logging 
     */
    Global.loggingEnabled = true;
    Global.logMode = 'all';
    Global.log = (mode, string) => {    
        if(Global.loggingEnabled){
            switch(mode){
              case 'debug':
                  if(Global.logMode == 'debug' || Global.logMode == 'all'){
                    console.log('Debug: '+JSON.stringify(string));
                  }
                  break;
              case 'error':
                  if(Global.logMode == 'error' || Global.logMode == 'all'){
                    console.log('Error: '+JSON.stringify(string));
                  }       
                  break;
              case 'info':
                  if(Global.logMode == 'info' || Global.logMode == 'all'){
                    console.log('Info: '+JSON.stringify(string));
                  }
                  break;
            }
        }
    }

Затем я обычно создаю такую ​​функцию в своих скриптах, или вы можете сделать ее доступной в глобальном скрипте:

Something.fail = (message_string, data, error_type, function_name, line_number) => {
    try{

        if(error_type == undefined){
            error_type = 'error';
        }

        Global.showErrorMessage(message_string, true);
        Global.spinner(100, false);

        Global.log(error_type, function_name);
        Global.log(error_type, 'Line: '+line_number);
        Global.log(error_type, 'Error: '+data);

    }catch(error){
        if(is_global){
            Global.spinner(100, false);
            Global.log('error', 'Error: '+error);
            Global.log('error', 'Undefined Error...');
        }else{
            console.log('Error:'+error);
            console.log('Global Not Loaded!');
        }           
    }   
}

А потом я просто использую это вместо console.log вот так:

try{
 // To Do Somehting
 Something.fail('Debug Something', data, 'debug', 'myFunc()', new Error().lineNumber);
}catch(error){
 Something.fail('Something Failed', error, 'error', 'myFunc()', new Error().lineNumber);
}

Если рабочий процесс выполняется с использованием правильных инструментов, таких как parcel/, webpackто это больше не головная боль, потому что productionсборка console.logсбрасывается. Даже несколькими годами ранее с Gulp/ Gruntэто тоже можно было автоматизировать.

Многие из современных систем , такие , как Angular, React, Svelte, Vue.jsприходят с этой установкой вне коробки. По сути, вам не нужно ничего делать, пока вы развертываете правильную сборку, то есть productionту, developmentкоторая еще не будет console.log.