'console' è un errore indefinito per Internet Explorer


375

Sto usando Firebug e ho alcune dichiarazioni come:

console.log("...");

nella mia pagina In IE8 (probabilmente anche nelle versioni precedenti) ricevo errori di script che dicono che "console" non è definita. Ho provato a metterlo in cima alla mia pagina:

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

continuo a ricevere gli errori. Un modo per sbarazzarsi degli errori?


4
Usalo typeofnel tuo if, eviterà errori indefiniti: if(typeof console === "undefined") { var console = { log: function (logMsg) { } }; }
Flak DiNenno

21
console.log () funziona solo quando lo strumento dev di IE è aperto (sì, IE è scadente). vedi stackoverflow.com/questions/7742781/…
Adrien Be

1
La migliore risposta a questa domanda è stackoverflow.com/a/16916941/2274855
Vinícius Moraes,


1
Il link @Aprillion è interrotto, utilizzare invece questo: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Alfred Bez,

Risposte:


378

Provare

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

Una variabile non definita non può essere riferita direttamente. Tuttavia, tutte le variabili globali sono attributi con lo stesso nome del contesto globale ( windownel caso dei browser) e l'accesso a un attributo non definito va bene.

Oppure usa if (typeof console === 'undefined') console = ...se vuoi evitare la variabile magica window, vedi la risposta di @Tim Down .


160
Giusto per essere chiari con chiunque altro lo usi, posizionalo <script type="text/javascript"> if (!window.console) console = {log: function() {}}; </script>nella parte superiore della tua pagina! Grazie Kenny.
windowsgm,

11
Che direvar console = console || { log: function() {} };
devlord il

9
@lorddev Per usare quella stenografia devi includere window:var console = window.console || { log: function() {} };
jlengstorf il

64
Accidenti ... costruisci un bel sito web, sviluppandolo per il tuo browser preferito. Alla fine spendi 4-5 ORE per renderlo compatibile con tutti gli altri browser MODERNI, quindi trascorri 4-5 GIORNI per renderlo compatibile con IE.
Israele,

6
Il problema con quella risposta è se stai usando un altro nome come debug, avvisa, conta con il browser che manca la console genererà un'eccezione vedi il modo migliore per farlo stackoverflow.com/a/16916941/2274855
Vinícius Moraes

319

Incolla quanto segue nella parte superiore di JavaScript (prima di utilizzare 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;
  }
})();

Il wrapper di chiusura della funzione è di includere le variabili in modo da non definire alcuna variabile. Ciò protegge sia indefinito consoleche indefinito console.debug(e altri metodi mancanti).

EDIT: ho notato che HTML5 Boilerplate utilizza un codice simile nel suo file js / plugins.js, se stai cercando una soluzione che (probabilmente) sarà mantenuta aggiornata.


14
Perché questa risposta ha così pochi voti? È il più completo tra quelli pubblicati qui.
mavilein,

A causa della data. Assolutamente d'accordo con le soluzioni di lavoro corrette. Penso che questo argomento debba essere moderato. Scusa per il pessimo inglese.
woto,

Abbastanza completo, tranne per il fatto che non proverà a reindirizzare la registrazione alla funzione di registro (se presente), quindi tutti i registri andranno persi
Christophe Roussy,

5
Quando si verificherebbe esattamente? Questo codice dovrebbe definire solo elementi che non sono ancora stati definiti.
Peter Tseng,

4
Penso in entrambi i modi - (function () {...} ()) o (function () {...}) () - funziona in realtà
Peter Tseng,

73

Un'altra alternativa è l' typeofoperatore:

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

Un'altra alternativa è usare una libreria di log, come il mio log4javascript .


Sarebbe comunque una buona idea cambiare l'incarico non dichiarato in una dichiarazione adeguata.
kangax,

1
Intendi dire usando var? Ciò confonderebbe solo le cose qui. O intendi assegnare window.consolepiuttosto che console?
Tim Down,

Usando var. Perché confonderebbe le cose qui?
kangax,

2
Che discussione confusa. +1 alla risposta originale. Se potessi dare +2 vorrei fornire un link al tuo log4javascript. Grazie OP!
Jay Taylor,

8
@yckart: No. typeofè garantito per restituire una stringa ed "undefined"è una stringa. Quando i due operandi sono dello stesso tipo ==e=== vengono specificati per eseguire esattamente gli stessi passaggi. L'utilizzo typeof x == "undefined"è un modo solido per verificare se xnon è definito in alcun ambito e in qualsiasi ambiente conforme a ECMAScript 3.
Tim Down

47

Per una soluzione più solida, utilizzare questo pezzo di codice (tratto dal codice sorgente di 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

Nei miei script, utilizzo la scorciatoia:

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

o, se non è possibile o fattibile modificare ogni riga console.log, creo una console falsa:

// 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
Errore di sintassi. Perché non soloif(!console) {console = {} ; console.log = function(){};}
Meekohi,

1
O non solo!window.console && (window.console = { log: function () { } });
Maksim Vi.

10

È possibile utilizzare console.log()se Developer Toolsin IE8 è stato aperto e inoltre è possibile utilizzare la Consolecasella di testo nella scheda script.


7
Questo non va bene se si dimentica di scambiare il codice della console. L'errore in IE8 impedirà il funzionamento del tuo codice JS
yunzen

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

1
caveat emptor: questo dovrebbe essere definito a livello globale dove si thisriferisce window.
Sgnl

7

Basato su due risposte precedenti di

e le documentazioni per

Ecco un'implementazione del migliore sforzo per il problema, nel senso che se esiste un console.log che esiste effettivamente, colma le lacune per i metodi inesistenti tramite console.log.

Ad esempio per IE6 / 7 puoi sostituire la registrazione con avviso (stupido ma funziona) e quindi includere il mostro di seguito (l'ho chiamato console.js): [Sentiti libero di rimuovere i commenti come ritieni opportuno, li ho lasciati come riferimento, un minimizer può affrontarli]:

<!--[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>

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

Non sono sicuro se abbiamo bisogno methods.hasOwnProperty(method) && nel ciclo for.
TWiStErRob

Sono sicuro che ne hai bisogno.
ErikE

Ha eseguito un rapido test nella console di Chrome: > x = { a: 1, b: 2}-> Object {a: 1, b: 2}e for(var f in x) {console.log(f + " " + x[f]);} 'end'-> a 1 b 2 "end". Quindi un oggetto anonimo creato non ha alcuna proprietà aggiuntiva e methodsviene appena creato prima del forciclo. È possibile hackerare quanto sopra?
TWiStErRob,

3
Sì. var x = { a: 1, b: 2}; Object.prototype.surprise = 'I\'m in yer objectz'; for (var f in x) {console.log(f, x[f]);}Non si sa mai cosa una libreria ha fatto agli oggetti nella catena di eredità dell'oggetto con cui si sta lavorando. Pertanto, la raccomandazione di utilizzare strumenti di qualità del codice javascript come jshint e jslint hasOwnProperty.
ErikE

6

In IE9, se la console non è aperta, questo codice:

alert(typeof console);

mostrerà "oggetto", ma questo codice

alert(typeof console.log);

genererà un'eccezione TypeError, ma non restituirà un valore indefinito;

Quindi, la versione garantita del codice sarà simile a questa:

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

6

Sto solo usando console.log nel mio codice. Quindi includo un liner 2 molto corto

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

1
Come funziona ... Non vedo alcuna riga console.log stampata sul browser IE, ho testato con 2 sistemi diversi in cui 1 - console.log funziona e 2 sistemi no. ho provato in entrambi ma non sono riuscito a vedere alcun registro in entrambi i sistemi.
Kirir,

2

Ho notato che OP utilizza Firebug con IE, quindi supponiamo che sia Firebug Lite . Questa è una situazione funky poiché la console viene definita in IE quando viene aperta la finestra del debugger, ma cosa succede quando Firebug è già in esecuzione? Non sono sicuro, ma forse il metodo "firebugx.js" potrebbe essere un buon modo per testare in questa situazione:

fonte:

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

(collegamenti aggiornati 12/2014)



1

Per il debug in IE, controlla questo log4javascript


Questo è fantastico, soprattutto perché la mia console IE8 non emette nulla.
Firsh - LetsWP.io

1
@Firsh Grazie per i tuoi commenti.
Praveen,

1
Stavo cercando il commento su un'altra domanda qui che diceva 'autopromozione spudorata' o non lo so - simile - qualcuno che ha detto di aver creato questa sceneggiatura, sei stato tu? Ho già chiuso quella scheda. Comunque è uno strumento davvero eccezionale e molto utile per il mio progetto.
Firsh - LetsWP.io

1
@Firsh Non ho creato questo script, sono una persona come te ha beneficiato dell'uso dello strumento.
Praveen,

1

Per IE8 o il supporto console limitato a console.log (nessun debug, traccia, ...) è possibile effettuare le seguenti operazioni:

  • Se console OR console.log non definito: creare funzioni fittizie per le funzioni della console (traccia, debug, registro, ...)

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

  • Altrimenti se console.log è definito (IE8) E console.debug (qualsiasi altro) non è definito: reindirizzare tutte le funzioni di registrazione su console.log, questo consente di conservare quei registri!

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

Non sono sicuro del supporto dell'asserzione in varie versioni di IE, ma qualsiasi suggerimento è il benvenuto. Anche pubblicato questa risposta qui: Come posso utilizzare la registrazione della console in Internet Explorer?


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

1

Stub della console in 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

È possibile utilizzare quanto segue per dare un ulteriore grado di assicurazione che hai tutte le basi coperte. L'uso typeofprima eviterà eventuali undefinederrori. L'utilizzo ===garantirà inoltre che il nome del tipo sia effettivamente la stringa "non definita". Infine, ti consigliamo di aggiungere un parametro alla firma della funzione (ho scelto logMsgarbitrariamente) per garantire la coerenza, dal momento che passi qualsiasi cosa desideri stampare sulla console alla funzione di registro. Ciò ti consente inoltre di mantenere la tua intelligenza accurata ed evita qualsiasi avvertenza / errore nell'IDE consapevole di JS.

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


0

Si è verificato un problema simile durante l'esecuzione di console.log in finestre figlio in IE9, creato dalla funzione window.open.

Sembra che in questo caso la console sia definita solo nella finestra padre e non sia definita nelle finestre figlio fino a quando non vengono aggiornate. Lo stesso vale per i figli di finestre secondarie.

Affronto questo problema avvolgendo il log nella prossima funzione (sotto è il frammento del modulo)

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

Dopo aver avuto così tanti problemi con questa cosa (è difficile eseguire il debug dell'errore poiché se si apre la console per sviluppatori l'errore non si verifica più!) Ho deciso di creare un codice di overkill per non dovermi mai più preoccupare di questo:

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

Personalmente uso sempre console.log e console.error, ma questo codice gestisce tutte le altre funzioni come mostrato nella rete degli sviluppatori Mozzila: https://developer.mozilla.org/en-US/docs/Web/API/console . Basta inserire quel codice nella parte superiore della pagina e il gioco è fatto per sempre.


-11

Puoi utilizzare console.log (...) direttamente in Firefox ma non in IE. In IE devi usare window.console.


11
console.log e window.console.log fanno riferimento alla stessa funzione in qualsiasi browser che è anche in remoto conforme a ECMAscript. È buona norma utilizzare quest'ultimo per evitare che una variabile locale oscuri accidentalmente l'oggetto console globale, ma ciò non ha assolutamente nulla a che fare con la scelta del browser. console.log funziona perfettamente in IE8 e AFAIK non ha alcuna capacità di registrazione in IE6 / 7.
Tgr,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.