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


375

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?


4
Utilisez typeofdans votre if, cela évitera les erreurs non définies: if(typeof console === "undefined") { var console = { log: function (logMsg) { } }; }
Flak DiNenno

21
console.log () ne fonctionne que lorsque l'outil de développement d'IE est ouvert (oui IE est merdique). voir stackoverflow.com/questions/7742781/…
Adrien Be

1
La meilleure réponse à cette question est stackoverflow.com/a/16916941/2274855
Vinícius Moraes


1
Le lien @Aprillion est rompu, utilisez celui-ci à la place: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Alfred Bez

Réponses:


378

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 .


160
Juste pour être clair pour quiconque l'utilise, placez- <script type="text/javascript"> if (!window.console) console = {log: function() {}}; </script>le en haut de votre page! Merci Kenny.
windowsgm

11
Qu'en est-ilvar console = console || { log: function() {} };
devlord

9
@lorddev Pour utiliser ce raccourci, vous devez inclure window:var console = window.console || { log: function() {} };
jlengstorf

64
Merde ... vous construisez un beau site Web, en le développant pour votre navigateur préféré. À la fin, vous passez 4 à 5 HEURES pour le rendre compatible avec tous les autres navigateurs MODERNES, puis vous passez 4 à 5 JOURS pour le rendre compatible avec IE.
Israël

6
Le problème avec cette réponse est que si vous utilisez un autre nom comme debug, warn, count avec un navigateur sans console, une exception sera levée.Voyez la meilleure façon de le faire stackoverflow.com/a/16916941/2274855
Vinícius Moraes

319

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.


14
Pourquoi cette réponse a-t-elle si peu de votes positifs? C'est le plus complet de ceux affichés ici.
mavilein

À cause de la date. Entièrement d'accord avec des solutions de travail correctes. Je pense que ce sujet doit être modéré. Désolé pour mon mauvais anglais.
woto

Assez complet sauf qu'il n'essaiera pas de rediriger la journalisation vers la fonction log (si elle est présente) donc tous les logs sont perdus
Christophe Roussy

5
Quand cela se produirait-il exactement? Ce code ne doit définir que des éléments qui ne sont pas encore définis.
Peter Tseng

4
Je pense que dans les deux cas - (function () {...} ()) ou (function () {...}) () - fonctionne réellement
Peter Tseng

73

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 .


Ce serait toutefois une bonne idée de transformer une affectation non déclarée en une déclaration appropriée.
kangax

1
Voulez-vous dire utiliser var? Cela ne ferait qu'embrouiller les choses ici. Ou voulez-vous dire assigner à window.consoleplutôt que console?
Tim Down du

Utilisation var. Pourquoi cela confondrait-il les choses ici?
kangax

2
Quelle discussion déroutante. +1 à la réponse originale. Si je pouvais donner +2, je vous fournirais un lien vers votre propre log4javascript. Merci OP!
Jay Taylor

8
@yckart: No. typeofest garanti pour renvoyer une chaîne et "undefined"est une chaîne. Lorsque les deux opérandes sont du même type ==et ===sont spécifiés pour effectuer exactement les mêmes étapes. L'utilisation typeof x == "undefined"est un moyen solide de tester si un domaine xn'est pas défini et n'importe quel environnement conforme à ECMAScript 3.
Tim Down

47

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

13

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

2
Erreur de syntaxe. Pourquoi pas seulementif(!console) {console = {} ; console.log = function(){};}
Meekohi

1
Ou pas seulement!window.console && (window.console = { log: function () { } });
Maksim Vi.

10

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.


7
Ce n'est pas bon si vous oubliez de récupérer le code de la console. L'erreur dans IE8 empêchera votre code JS de fonctionner
yunzen

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

1
caveat emptor: cela devrait être défini au niveau mondial où il est thisfait référence window.
Sgnl

7

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

et les documentations pour

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

Je ne sais pas si nous avons besoin methods.hasOwnProperty(method) && de la boucle for.
TWiStErRob

Je suis sûr que vous en avez besoin.
ErikE

A fait un test rapide dans la console de Chrome: > x = { a: 1, b: 2}-> Object {a: 1, b: 2}et for(var f in x) {console.log(f + " " + x[f]);} 'end'-> a 1 b 2 "end". Ainsi, un objet anonyme créé n'a pas de propriété supplémentaire et methodsest juste créé avant la forboucle. Est-il possible de pirater ce qui précède?
TWiStErRob

3
Oui. var x = { a: 1, b: 2}; Object.prototype.surprise = 'I\'m in yer objectz'; for (var f in x) {console.log(f, x[f]);}Vous ne savez jamais ce qu'une bibliothèque a fait aux objets de la chaîne d'héritage de l'objet avec lequel vous travaillez. Ainsi la recommandation par des outils de qualité de code javascript comme jshint et jslint à utiliser hasOwnProperty.
ErikE

6

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

6

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

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

1
Comment ça marche ... Je ne vois aucune ligne console.log imprimée sur le navigateur IE, j'ai testé avec 2 systèmes différents où en 1 - console.log fonctionne et 2 système ce n'est pas le cas. J'ai essayé dans les deux mais je n'ai pu voir aucun journal dans les deux systèmes.
kiran

2

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)



1

Pour le débogage dans IE, consultez ce log4javascript


C'est génial, d'autant plus que ma console IE8 ne produit rien.
Firsh - LetsWP.io

1
@Firsh Merci pour vos commentaires.
Praveen

1
Je cherchais le commentaire sur une autre question ici qui disait 'auto promotion sans vergogne' ou je ne sais pas - similaire - quelqu'un qui a dit qu'il avait créé ce scipt, c'était vous? J'ai déjà fermé cet onglet. Quoi qu'il en soit, c'est un très bon outil et très utile pour mon projet.
Firsh - LetsWP.io

1
@Firsh Je n'ai pas créé ce script, je suis une personne comme vous qui a bénéficié de l'outil.
Praveen

1

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?



1

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

0

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


0

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

-2

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.


-11

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


11
console.log et window.console.log font référence à la même fonction dans tout navigateur qui est même conforme à distance à ECMAscript. Il est recommandé d'utiliser ce dernier pour éviter qu'une variable locale ne masque accidentellement l'objet console global, mais cela n'a absolument rien à voir avec le choix du navigateur. console.log fonctionne très bien dans IE8 et AFAIK il n'y a aucune capacité de journalisation dans IE6 / 7.
Tgr
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.