web-dev-qa-db-fra.com

Devrais-je supprimer console.log du code de production?

J'ai actuellement cette déclaration JS partout dans mon code:

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

Je me demande si cela coûte cher ou s'il a des effets secondaires négatifs sur la production.

Suis-je libre de laisser la connexion côté client ou doit-il y aller?

EDIT: En fin de compte, je suppose que le meilleur argument que je puisse (et qui que ce soit d'autre?) Est qu'il existe une quantité non négligeable de données supplémentaires transférées entre le serveur et le client en laissant des messages de journalisation laissés. Pour que le code de production soit entièrement optimisé, la journalisation devra être supprimée afin de réduire la taille du javascript envoyé au client.

javascriptlogging
70
Sean Anderson

Vous devriez pas ajouter des outils de développement à une page de production.

Pour répondre à l’autre question: le code ne peut avoir d’effet secondaire négatif:

  • window.console sera évalué à false si console n'est pas défini
  • console.log("Foo") imprimera le message sur la console quand il sera défini (à condition que la page ne remplace pas console.log par une non-fonction).
32
Rob W

Une autre solution consiste à «tronquer» l’objet console s’il n’est pas défini, afin d’éviter les erreurs dans des contextes où la console n’est pas i.e.

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

vous avez l’idée ... il y a beaucoup de fonctions définies dans les différentes implémentations de la console, vous pouvez donc les stub toutes ou juste celles que vous utilisez (par exemple, si vous n’utilisez que console.log et n’avez jamais utilisé console.profile, console.time, etc. ..)

Pour moi, cela constitue une meilleure alternative de développement que d’ajouter des conditions devant chaque appel ou de ne pas les utiliser.

voir aussi: Est-ce une mauvaise idée de laisser des appels "console.log ()" dans votre produit sur du code JavaScript?

45
craigb

UglifyJS2

Si vous utilisez ce minifier, vous pouvez définir l’option drop_console :

Passez true pour rejeter les appels à la console. * Fonctions

Je suggérerais donc de laisser les appels console.log tels qu'ils sont pour la partie la plus délicate de la base de code.

25
terales

Si la minification fait partie de votre processus de construction, vous pouvez l'utiliser pour supprimer le code de débogage, comme expliqué ici avec le compilateur de fermetures Google: Exclure le code JavaScript de débogage pendant la minification

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

Si vous compilez avec des optimisations avancées, ce code sera même identifié comme mort et entièrement supprimé

15
wutz

Oui. console.log lève une exception dans les navigateurs qui ne le supportent pas (aucun objet console ne sera trouvé).

5
MK_Dev

Généralement, oui, ce n’est pas une bonne idée d’exposer des messages de journal dans votre code de production. 

Idéalement, vous devriez supprimer ces messages de journal avec un script de construction avant le déploiement. mais beaucoup (la plupart) des gens n'utilisent pas de processus de construction (y compris moi).

Voici un extrait de code que j'ai utilisé récemment pour résoudre ce dilemme. Il corrige les erreurs causées par une console non définie dans l'ancien IE, ainsi que la désactivation de la journalisation si elle était dans "mode_développement".

// 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);
}

Je suis à peu près sûr d'avoir pris une grande partie de la addConsoleNoOp f'n ci-dessus d'une autre réponse sur SO, mais je ne le trouve pas pour le moment. J'ajouterai une référence plus tard si je la trouve.

edit: Ce n'est pas le message auquel je pensais, mais voici une approche similaire: https://github.com/paulmillr/console-polyfill/blob/master/index.js

4
Zach Lysobey
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;
})();

Utilisation:

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

Oui, il est recommandé d’utiliser console.log à des fins de débogage javascript, mais il doit être supprimé du serveur de production ou, si nécessaire, ajouté sur le serveur de production en prenant en compte certains points clés: 

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

Le bloc de code ci-dessus doit être utilisé partout pour la journalisation afin de vérifier d'abord si la console est prise en charge pour le navigateur actuel et si le débogage est activé ou non.

isDebugEnabled doit être défini sur true ou false en fonction de notre environnement.

1
shanky

En gros, je remplace la fonction console.log par celle qui sait où le code est exécuté. Ainsi, je peux continuer à utiliser console.log comme je le fais toujours. Il sait automatiquement que je suis en mode dev/qa ou en production. Il existe également un moyen de le forcer . Voici un violon qui fonctionne . http://jsfiddle.net/bsurela/Zneek/

Voici l'extrait de code car le débordement de pile est signalé par des personnes postant 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);
    }
},
0
Bhavin

TL; DR

Idée: La journalisation des objets les empêche d’être récupérés.

Détails

  1. Si vous transmettez des objets à console.log, ces objets sont accessibles par référence à partir de la console de DevTools. Vous pouvez le vérifier en enregistrant un objet, en le modifiant et en constatant que les anciens messages reflètent les modifications ultérieures de l'objet.
  2. Si les journaux sont trop longs, les anciens messages sont supprimés dans Chrome.
  3. Si les journaux sont courts, les anciens messages ne sont pas supprimés. Si ces messages font référence à des objets, ils ne sont pas récupérés.

C'est juste une idée: J'ai vérifié les points 1 et 2 mais pas 3.

Solution

Si vous souhaitez conserver les journaux à des fins de dépannage côté client ou pour d’autres besoins, procédez comme suit:

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