'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 les versions antérieures aussi), je reçois des erreurs de script disant que la «console» n'est pas définie. J'ai essayé de mettre cela en haut de ma page:

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

je reçois toujours les erreurs. Une façon de se débarrasser des erreurs?

Essayer

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

Une variable non définie ne peut pas être référencée directement. Cependant, toutes les variables globales sont des attributs du même nom du contexte global ( windowdans 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 la réponse de @Tim Down .

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

L'encapsuleur de fermeture de fonction consiste à délimiter les variables de manière à ne définir aucune variable. Cela protège à la fois indéfini consoleet indéfini console.debug(et d'autres méthodes manquantes).

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

Une autre alternative est l' typeofopérateur:

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

Encore une autre alternative consiste à utiliser une bibliothèque de journalisation, comme mon propre log4javascript .

Pour une solution plus robuste, utilisez ce morceau de code (extrait 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;
        }
    }
}());

Dans mes scripts, j'utilise soit la sténographie:

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

ou, s'il n'est pas possible ou faisable d'éditer chaque ligne 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 () {});

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

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

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

• Vinícius Moraes
• Peter Tseng

et les documentations pour

• Internet Explorer (IE 10)
• Safari (2012. 07. 23.)
• Firefox (2013. 05. 20.)
• Chrome (2013. 01. 25.) et Chrome (2012. 10. 04.)
• et une partie de mes connaissances

Voici une implémentation au mieux pour le problème, ce qui signifie que s'il existe un console.log qui existe réellement, il comble les lacunes pour les méthodes non existantes via console.log.

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

<!--[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];
            }
        }
    })();

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

alert(typeof console);

affichera "objet", mais ce code

alert(typeof console.log);

lancera une exception TypeError, mais ne renverra pas de valeur non définie;

Ainsi, la version garantie du code ressemblera à ceci:

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

J'utilise uniquement console.log dans mon code. J'inclus donc une doublure très courte

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

Vous avez remarqué que OP utilise Firebug avec IE, alors supposez que c'est Firebug Lite . C'est une situation géniale 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 la méthode "firebugx.js" peut ê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)

J'utilise une fausse console ; J'ai un peu modifié le CSS pour qu'il soit plus joli mais fonctionne très bien.

Pour le débogage dans IE, consultez ce log4javascript

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 OU console.log non défini: créer 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 (tout autre) n'est pas défini: redirigez toutes les fonctions de journalisation vers console.log, cela permet de conserver ces journaux!

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

Je ne suis pas sûr de la prise en charge assert dans diverses versions d'IE, mais toutes les suggestions sont les bienvenues. A également publié cette réponse ici: Comment puis-je utiliser la journalisation de la console dans Internet Explorer?

console = console || { 
    debug: function(){}, 
    log: function(){}
    ...
}

Stub de console en 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: () => { },
    }
};

Vous pouvez utiliser ce qui suit pour donner un degré supplémentaire d'assurance que toutes vos bases sont couvertes. L'utilisation en typeofpremier évitera toute undefinederreur. L'utilisation ===garantit également que le nom du type est bien la chaîne "non définie". Enfin, vous voudrez ajouter un paramètre à la signature de la fonction (j'ai choisi logMsgarbitrairement) pour assurer la cohérence, car vous transmettez tout ce que vous voulez imprimer à la console à la fonction de journal. Cela vous permet également de garder l'intellisense précis et d'éviter tout avertissement / erreur dans votre IDE compatible JS.

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

Parfois, la console fonctionne dans IE8 / 9 mais échoue à d'autres moments. Ce comportement erratique dépend de l'ouverture des outils de développement et est décrit dans la question stackoverflow. IE9 prend-il en charge console.log et s'agit-il d'une fonction réelle?

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

Il semble que dans ce cas, la console est définie uniquement dans la fenêtre parent et n'est 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 est 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);
    }

Après avoir eu tellement de problèmes avec cette chose (il est difficile de déboguer l'erreur car si vous ouvrez la console développeur, l'erreur ne se produit plus!) J'ai décidé de créer un code excessif pour ne plus jamais avoir à vous soucier de cela:

if (typeof window.console === "undefined")
    window.console = {};

if (typeof window.console.debug === "undefined")
    window.console.debug= function() {};

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

if (typeof window.console.error === "undefined")
    window.console.error= function() {alert("error");};

if (typeof window.console.time === "undefined")
    window.console.time= function() {};

if (typeof window.console.trace === "undefined")
    window.console.trace= function() {};

if (typeof window.console.info === "undefined")
    window.console.info= function() {};

if (typeof window.console.timeEnd === "undefined")
    window.console.timeEnd= function() {};

if (typeof window.console.group === "undefined")
    window.console.group= function() {};

if (typeof window.console.groupEnd === "undefined")
    window.console.groupEnd= function() {};

if (typeof window.console.groupCollapsed === "undefined")
    window.console.groupCollapsed= function() {};

if (typeof window.console.dir === "undefined")
    window.console.dir= function() {};

if (typeof window.console.warn === "undefined")
    window.console.warn= function() {};

Personnellement, je n'utilise que console.log et console.error, mais ce code gère toutes les autres fonctions comme indiqué dans le Mozzila Developer Network: https://developer.mozilla.org/en-US/docs/Web/API/console . Mettez simplement ce code en haut de votre page et vous en aurez fini pour toujours.

Vous pouvez utiliser console.log (...) directement dans Firefox mais pas dans les IE. Dans les IE, vous devez utiliser window.console.