web-dev-qa-db-fra.com

'console' est une erreur non définie pour Internet Explorer

J'utilise Firebug et j'ai quelques déclarations comme:

console.log("...");

dans ma page. Dans IE8 (probablement aussi dans les versions antérieures), des erreurs de script sont générées indiquant que 'console' n'est pas définie. J'ai essayé de mettre ceci en haut de ma page:

<script type="text/javascript">
    if (!console) console = {log: function() {}};
</script>

je reçois toujours les erreurs. Un moyen de se débarrasser des erreurs?

javascriptinternet-explorerinternet-explorer-8ie-developer-tools
372
user246114

Essayer

if (!window.console) console = ...

Une variable non définie ne peut pas être référée directement. Cependant, toutes les variables globales sont des attributs du même nom que le contexte global (window dans le cas des navigateurs), et l'accès à un attribut non défini est correct.

Ou utilisez if (typeof console === 'undefined') console = ... si vous voulez éviter la variable magique window, voir réponse de @ Tim Down .

376
kennytm

Collez ce qui suit en haut de votre JavaScript (avant d’utiliser la console):

/**
 * Protect window.console method calls, e.g. console is not defined on IE
 * unless dev tools are open, and IE doesn't define console.debug
 * 
 * Chrome 41.0.2272.118: debug,error,info,log,warn,dir,dirxml,table,trace,assert,count,markTimeline,profile,profileEnd,time,timeEnd,timeStamp,timeline,timelineEnd,group,groupCollapsed,groupEnd,clear
 * Firefox 37.0.1: log,info,warn,error,exception,debug,table,trace,dir,group,groupCollapsed,groupEnd,time,timeEnd,profile,profileEnd,assert,count
 * Internet Explorer 11: select,log,info,warn,error,debug,assert,time,timeEnd,timeStamp,group,groupCollapsed,groupEnd,trace,clear,dir,dirxml,count,countReset,cd
 * Safari 6.2.4: debug,error,log,info,warn,clear,dir,dirxml,table,trace,assert,count,profile,profileEnd,time,timeEnd,timeStamp,group,groupCollapsed,groupEnd
 * Opera 28.0.1750.48: debug,error,info,log,warn,dir,dirxml,table,trace,assert,count,markTimeline,profile,profileEnd,time,timeEnd,timeStamp,timeline,timelineEnd,group,groupCollapsed,groupEnd,clear
 */
(function() {
  // Union of Chrome, Firefox, IE, Opera, and Safari console methods
  var methods = ["assert", "cd", "clear", "count", "countReset",
    "debug", "dir", "dirxml", "error", "exception", "group", "groupCollapsed",
    "groupEnd", "info", "log", "markTimeline", "profile", "profileEnd",
    "select", "table", "time", "timeEnd", "timeStamp", "timeline",
    "timelineEnd", "trace", "warn"];
  var length = methods.length;
  var console = (window.console = window.console || {});
  var method;
  var noop = function() {};
  while (length--) {
    method = methods[length];
    // define undefined methods as noops to prevent errors
    if (!console[method])
      console[method] = noop;
  }
})();

Le wrapper de fermeture de fonction consiste à définir la portée des variables de manière à ne définir aucune variable. Ceci protège à la fois contre console indéfini et console.debug non défini (et d'autres méthodes manquantes).

EDIT: J'ai remarqué que Boilerplate HTML5 utilise un code similaire dans son fichier js/plugins.js, si vous recherchez une solution qui sera (probablement) maintenue à jour.

317
Peter Tseng

Une autre alternative est l'opérateur typeof:

if (typeof console == "undefined") {
    this.console = {log: function() {}};
}

Une autre alternative consiste à utiliser une bibliothèque de journalisation, telle que ma propre log4javascript .

73
Tim Down

Pour une solution plus robuste, utilisez ce morceau de code (tiré du code source de Twitter):

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());
47
Vinícius Moraes

Dans mes scripts, j'utilise soit le raccourci:

window.console && console.log(...) // only log if the function exists

ou, s'il n'est pas possible ou faisable d'éditer chaque ligne de console.log, je crée une fausse console:

// check to see if console exists. If not, create an empty object for it,
// then create and empty logging function which does nothing. 
//
// REMEMBER: put this before any other console.log calls
!window.console && (window.console = {} && window.console.log = function () {});
13
iblamefish

Vous pouvez utiliser console.log() si vous avez ouvert Developer Tools dans IE8 et vous pouvez également utiliser la zone de texte Console sur l'onglet de script.

10
user568164
if (typeof console == "undefined") {
  this.console = {
    log: function() {},
    info: function() {},
    error: function() {},
    warn: function() {}
  };
}
7
insign

Basé sur deux réponses précédentes de

et les documentations pour

Voici une implémentation optimale du problème, ce qui signifie que s'il existe un fichier console.log qui existe réellement, il comble les lacunes des méthodes non existantes via console.log.

Par exemple, pour IE6/7, vous pouvez remplacer la journalisation par alert (stupide mais fonctionne), puis inclure le monstre ci-dessous (je l'ai appelé console.js): [N'hésitez pas à supprimer les commentaires à votre guise, je les ai laissés pour référence, un minimiseur peut les attaquer]:

<!--[if lte IE 7]>
<SCRIPT LANGUAGE="javascript">
    (window.console = window.console || {}).log = function() { return window.alert.apply(window, arguments); };
</SCRIPT>
<![endif]-->
<script type="text/javascript" src="console.js"></script>

et console.js:

    /**
     * Protect window.console method calls, e.g. console is not defined on IE
     * unless dev tools are open, and IE doesn't define console.debug
     */
    (function() {
        var console = (window.console = window.console || {});
        var noop = function () {};
        var log = console.log || noop;
        var start = function(name) { return function(param) { log("Start " + name + ": " + param); } };
        var end = function(name) { return function(param) { log("End " + name + ": " + param); } };

        var methods = {
            // Internet Explorer (IE 10): http://msdn.Microsoft.com/en-us/library/ie/hh772169(v=vs.85).aspx#methods
            // assert(test, message, optionalParams), clear(), count(countTitle), debug(message, optionalParams), dir(value, optionalParams), dirxml(value), error(message, optionalParams), group(groupTitle), groupCollapsed(groupTitle), groupEnd([groupTitle]), info(message, optionalParams), log(message, optionalParams), msIsIndependentlyComposed(oElementNode), profile(reportName), profileEnd(), time(timerName), timeEnd(timerName), trace(), warn(message, optionalParams)
            // "assert", "clear", "count", "debug", "dir", "dirxml", "error", "group", "groupCollapsed", "groupEnd", "info", "log", "msIsIndependentlyComposed", "profile", "profileEnd", "time", "timeEnd", "trace", "warn"

            // Safari (2012. 07. 23.): https://developer.Apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html#//Apple_ref/doc/uid/TP40007874-CH8-SW20
            // assert(expression, message-object), count([title]), debug([message-object]), dir(object), dirxml(node), error(message-object), group(message-object), groupEnd(), info(message-object), log(message-object), profile([title]), profileEnd([title]), time(name), markTimeline("string"), trace(), warn(message-object)
            // "assert", "count", "debug", "dir", "dirxml", "error", "group", "groupEnd", "info", "log", "profile", "profileEnd", "time", "markTimeline", "trace", "warn"

            // Firefox (2013. 05. 20.): https://developer.mozilla.org/en-US/docs/Web/API/console
            // debug(obj1 [, obj2, ..., objN]), debug(msg [, subst1, ..., substN]), dir(object), error(obj1 [, obj2, ..., objN]), error(msg [, subst1, ..., substN]), group(), groupCollapsed(), groupEnd(), info(obj1 [, obj2, ..., objN]), info(msg [, subst1, ..., substN]), log(obj1 [, obj2, ..., objN]), log(msg [, subst1, ..., substN]), time(timerName), timeEnd(timerName), trace(), warn(obj1 [, obj2, ..., objN]), warn(msg [, subst1, ..., substN])
            // "debug", "dir", "error", "group", "groupCollapsed", "groupEnd", "info", "log", "time", "timeEnd", "trace", "warn"

            // Chrome (2013. 01. 25.): https://developers.google.com/chrome-developer-tools/docs/console-api
            // assert(expression, object), clear(), count(label), debug(object [, object, ...]), dir(object), dirxml(object), error(object [, object, ...]), group(object[, object, ...]), groupCollapsed(object[, object, ...]), groupEnd(), info(object [, object, ...]), log(object [, object, ...]), profile([label]), profileEnd(), time(label), timeEnd(label), timeStamp([label]), trace(), warn(object [, object, ...])
            // "assert", "clear", "count", "debug", "dir", "dirxml", "error", "group", "groupCollapsed", "groupEnd", "info", "log", "profile", "profileEnd", "time", "timeEnd", "timeStamp", "trace", "warn"
            // Chrome (2012. 10. 04.): https://developers.google.com/web-toolkit/speedtracer/logging-api
            // markTimeline(String)
            // "markTimeline"

            assert: noop, clear: noop, trace: noop, count: noop, timeStamp: noop, msIsIndependentlyComposed: noop,
            debug: log, info: log, log: log, warn: log, error: log,
            dir: log, dirxml: log, markTimeline: log,
            group: start('group'), groupCollapsed: start('groupCollapsed'), groupEnd: end('group'),
            profile: start('profile'), profileEnd: end('profile'),
            time: start('time'), timeEnd: end('time')
        };

        for (var method in methods) {
            if ( methods.hasOwnProperty(method) && !(method in console) ) { // define undefined methods as best-effort methods
                console[method] = methods[method];
            }
        }
    })();
7
TWiStErRob

Dans IE9, si la console n'est pas ouverte, ce code:

alert(typeof console);

montrera "objet", mais ce code

alert(typeof console.log);

lancera une exception TypeError, mais ne retournera pas de valeur indéfinie;

Ainsi, la version de code garantie ressemblera à ceci:

try {
    if (window.console && window.console.log) {
        my_console_log = window.console.log;
    }
} catch (e) {
    my_console_log = function() {};
}
6
bonbonez

Je n'utilise que console.log dans mon code. J'inclus donc un très court 2 liner

var console = console || {};
console.log = console.log || function(){};
6
Ruben Decrop

Remarqué que OP utilise Firebug avec IE, supposons donc que c'est Firebug Lite . Il s'agit d'une situation amusante, car la console est définie dans IE lorsque la fenêtre du débogueur est ouverte, mais que se passe-t-il lorsque Firebug est déjà en cours d'exécution? Pas sûr, mais peut-être que la méthode "firebugx.js" pourrait être un bon moyen de tester dans cette situation:

la source:

https://code.google.com/p/fbug/source/browse/branches/firebug1.2/lite/firebugx.js?r=187

    if (!window.console || !console.firebug) {
        var names = [
            "log", "debug", "info", "warn", "error", "assert",
            "dir","dirxml","group","groupEnd","time","timeEnd",
            "count","trace","profile","profileEnd"
        ];
        window.console = {};
        for (var i = 0; i < names.length; ++i)
            window.console[names[i]] = function() {}
    }

(liens mis à jour 12/2014)

2
Roberto
console = console || { 
    debug: function(){}, 
    log: function(){}
    ...
}
1
David Glass

Pour le débogage dans IE, vérifiez ceci log4javascript

1
Praveen

Pour IE8 ou la prise en charge de la console limitée à console.log (pas de débogage, trace, ...), vous pouvez effectuer les opérations suivantes:

  • Si console OR console.log undefined: Créez des fonctions factices pour les fonctions de la console (trace, débogage, journal, ...)

    window.console = { debug : function() {}, ...};

  • Sinon, si console.log est défini (IE8) ET console.debug (aucun autre) n'est défini: redirigez toutes les fonctions de journalisation vers console.log, cela permet de conserver ces journaux!

    window.console = { debug : window.console.log, ...};

Pas sûr du support d'assert dans les différentes versions de IE, mais toute suggestion est la bienvenue. A également posté cette réponse ici: Comment puis-je utiliser la journalisation de la console dans Internet Explorer?

1
Christophe Roussy

J'utilise fauxconsole ; J'ai modifié le css un peu pour qu'il soit plus joli mais fonctionne très bien.

1
Stijn Geukens

Problème similaire rencontré lors de l’exécution de console.log dans des fenêtres enfants dans IE9, créé par la fonction window.open.

Dans ce cas, il semble que la console ne soit définie que dans la fenêtre parente et qu'elle ne soit pas définie dans les fenêtres enfants jusqu'à ce que vous les actualisiez. Il en va de même pour les enfants des fenêtres enfants.

Je traite ce problème en encapsulant le journal dans la fonction suivante (ci-dessous un fragment de module)

getConsole: function()
    {
        if (typeof console !== 'undefined') return console;

        var searchDepthMax = 5,
            searchDepth = 0,
            context = window.opener;

        while (!!context && searchDepth < searchDepthMax)
        {
            if (typeof context.console !== 'undefined') return context.console;

            context = context.opener;
            searchDepth++;
        }

        return null;
    },
    log: function(message){
        var _console = this.getConsole();
        if (!!_console) _console.log(message);
    }
0
Max Venediktov

Stub de console dans TypeScript:

if (!window.console) {
console = {
    assert: () => { },
    clear: () => { },
    count: () => { },
    debug: () => { },
    dir: () => { },
    dirxml: () => { },
    error: () => { },
    group: () => { },
    groupCollapsed: () => { },
    groupEnd: () => { },
    info: () => { },
    log: () => { },
    msIsIndependentlyComposed: (e: Element) => false,
    profile: () => { },
    profileEnd: () => { },
    select: () => { },
    time: () => { },
    timeEnd: () => { },
    trace: () => { },
    warn: () => { },
    }
};
0
devi

Parfois, la console fonctionnera dans IE8/9 mais échouera à d’autres moments. Ce comportement erratique dépend du fait que vous ayez ou non des outils de développement ouverts et est décrit dans la question de stackoverflow IE9 prend-il en charge console.log, et s'agit-il d'une fonction réelle?

0
Anon

Vous pouvez utiliser les éléments ci-dessous pour donner un degré d'assurance supplémentaire couvrant toutes les bases. En utilisant typeof en premier, vous éviterez les erreurs undefined. Utiliser === permettra également de s’assurer que le nom du type est bien la chaîne "indéfini". Enfin, vous voudrez ajouter un paramètre à la signature de la fonction (j’ai choisi logMsg arbitrairement) pour assurer la cohérence, puisque vous transmettez à la console ce que vous voulez imprimer. Ceci vous permet également de garder intellisense précis et d’éviter les avertissements/erreurs dans votre IDE compatible JS.

if(!window.console || typeof console === "undefined") {
  var console = { log: function (logMsg) { } };
}
0
Flak DiNenno