'console' ist ein undefinierter Fehler für Internet Explorer


375

Ich benutze Firebug und habe einige Aussagen wie:

console.log("...");

auf meiner Seite. In IE8 (wahrscheinlich auch in früheren Versionen) erhalte ich Skriptfehler, die besagen, dass "Konsole" undefiniert ist. Ich habe versucht, dies oben auf meiner Seite zu platzieren:

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

trotzdem bekomme ich die fehler. Gibt es eine Möglichkeit, die Fehler zu beseitigen?


4
Verwenden Sie typeofin Ihrem if, um undefinierte Fehler zu vermeiden: if(typeof console === "undefined") { var console = { log: function (logMsg) { } }; }
Flak DiNenno

21
console.log () funktioniert nur, wenn das Entwicklertool des IE geöffnet ist (ja, der IE ist beschissen). siehe stackoverflow.com/questions/7742781/…
Adrien Be

1
Die beste Antwort auf diese Frage ist stackoverflow.com/a/16916941/2274855
Vinícius Moraes


1
@Aprillion Link ist defekt, verwenden Sie stattdessen diesen: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Alfred Bez

Antworten:


378

Versuchen

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

Eine undefinierte Variable kann nicht direkt referenziert werden. Alle globalen Variablen sind jedoch Attribute mit demselben Namen wie der globale Kontext ( windowim Fall von Browsern), und der Zugriff auf ein undefiniertes Attribut ist in Ordnung.

Oder verwenden if (typeof console === 'undefined') console = ...Sie, wenn Sie die magische Variable vermeiden möchten window, lesen Sie die Antwort von @Tim Down .


160
Platzieren Sie es ganz <script type="text/javascript"> if (!window.console) console = {log: function() {}}; </script>oben auf Ihrer Seite , um allen anderen, die dies verwenden, klar zu sein ! Danke Kenny.
WindowsGM

11
Was ist mitvar console = console || { log: function() {} };
Devlord

9
@lorddev Um diese Abkürzung zu verwenden, müssen Sie windowvar console = window.console || { log: function() {} };
Folgendes

64
Verdammt ... Sie erstellen eine schöne Website und entwickeln sie für Ihren Lieblingsbrowser. Am Ende verbringen Sie 4-5 STUNDEN damit, es mit allen anderen MODERNEN Browsern kompatibel zu machen, und dann verbringen Sie 4-5 TAGE damit, es mit IE kompatibel zu machen.
Israel

6
Das Problem mit dieser Antwort ist , wenn Sie einen anderen Namen wie Debug verwenden, warnen, zählen mit Browser , dass der Mangel Konsole eine Ausnahme finden Sie in der besseren Weg , werfen das zu tun stackoverflow.com/a/16916941/2274855
Vinícius Moraes

319

Fügen Sie Folgendes oben in Ihr JavaScript ein (bevor Sie die Konsole verwenden):

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

Der Wrapper zum Schließen von Funktionen dient dazu, die Variablen so zu definieren, dass keine Variablen definiert werden. Dies schützt sowohl vor undefinierten consoleals auch vor undefinierten console.debug(und anderen fehlenden Methoden).

BEARBEITEN: Ich habe festgestellt, dass HTML5 Boilerplate in seiner Datei js / plugins.js ähnlichen Code verwendet, wenn Sie nach einer Lösung suchen, die (wahrscheinlich) auf dem neuesten Stand gehalten wird.


14
Warum hat diese Antwort so wenige positive Stimmen? Es ist das vollständigste der hier veröffentlichten.
Mavilein

Wegen des Datums. Stimmen Sie absolut mit den richtigen Arbeitslösungen überein. Ich denke, dieses Thema muss moderiert werden. Entschuldige mein schlechtes Englisch.
woto

Ganz vollständig, außer dass nicht versucht wird, die Protokollierung an die Protokollfunktion (falls vorhanden) umzuleiten, sodass alle Protokolle verloren gehen
Christophe Roussy,

5
Wann würde das genau passieren? Dieser Code sollte nur Elemente definieren, die noch nicht definiert sind.
Peter Tseng

4
Ich denke so oder so - (function () {...} ()) oder (function () {...}) () - funktioniert tatsächlich
Peter Tseng

73

Eine andere Alternative ist der typeofBetreiber:

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

Eine weitere Alternative ist die Verwendung einer Protokollierungsbibliothek, z. B. meines eigenen log4javascript .


Es wäre jedoch eine gute Idee, die nicht angemeldete Zuweisung in eine ordnungsgemäße Deklaration umzuwandeln.
Kangax

1
Meinst du mit var? Das würde die Dinge hier nur verwirren. Oder meinst du window.consoleeher zuweisen als console?
Tim Down

Verwenden von var. Warum sollte es die Dinge hier verwirren?
Kangax

2
Was für eine verwirrende Diskussion. +1 zur ursprünglichen Antwort. Wenn ich +2 geben könnte, würde ich einen Link zu Ihrem eigenen log4javascript bereitstellen. Danke OP!
Jay Taylor

8
@yckart: Nein typeofgibt garantiert einen String zurück und "undefined"ist ein String. Wenn die beiden Operanden vom gleichen Typ sind ==und ===angegeben werden, um genau die gleichen Schritte auszuführen. Die Verwendung typeof x == "undefined"ist eine absolut solide Methode, um zu testen, ob xin einem Bereich und einer ECMAScript 3-kompatiblen Umgebung undefiniert ist.
Tim Down

47

Verwenden Sie für eine robustere Lösung diesen Code (aus dem Quellcode von 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

In meinen Skripten verwende ich entweder die Kurzform:

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

oder wenn es nicht möglich oder machbar ist, jede console.log-Zeile zu bearbeiten, erstelle ich eine gefälschte Konsole:

// 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
Syntax-Fehler. Warum nicht einfachif(!console) {console = {} ; console.log = function(){};}
Meekohi

1
Oder nicht nur!window.console && (window.console = { log: function () { } });
Maksim Vi.

10

Sie können verwenden, console.log()wenn Sie Developer Toolsin IE8 geöffnet haben, und Sie können auch das ConsoleTextfeld auf der Registerkarte Skript verwenden.


7
Dies ist nicht gut, wenn Sie vergessen haben, den Code der Konsole auszutauschen. Der Fehler in IE8 verhindert, dass Ihr JS-Code funktioniert
yunzen

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

1
Vorbehalt: Dies sollte auf globaler Ebene definiert werden, auf die thisBezug genommen wird window.
Sgnl

7

Basierend auf zwei vorherigen Antworten von

und die Dokumentationen für

Hier ist eine Best-Effort-Implementierung für das Problem. Wenn also ein console.log vorhanden ist, füllt es die Lücken für nicht vorhandene Methoden über console.log.

Zum Beispiel können Sie für IE6 / 7 die Protokollierung durch Warnung ersetzen (dumm, funktioniert aber) und dann das folgende Monster einfügen (ich habe es console.js genannt): [Sie können Kommentare nach Belieben entfernen, ich habe sie als Referenz hinterlassen. ein Minimierer kann sie angehen]:

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

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

Ich bin mir nicht sicher, ob wir methods.hasOwnProperty(method) && in der for-Schleife brauchen .
TWiStErRob

Ich bin sicher, dass Sie es brauchen.
ErikE

Habe einen kurzen Test in der Chrome-Konsole durchgeführt: > x = { a: 1, b: 2}-> Object {a: 1, b: 2}und for(var f in x) {console.log(f + " " + x[f]);} 'end'-> a 1 b 2 "end". Ein erstelltes anonymes Objekt hat also keine zusätzliche Eigenschaft und methodswird nur vor der forSchleife erstellt. Ist es möglich, das oben genannte zu hacken?
TWiStErRob

3
Ja. var x = { a: 1, b: 2}; Object.prototype.surprise = 'I\'m in yer objectz'; for (var f in x) {console.log(f, x[f]);}Sie wissen nie, was eine Bibliothek mit den Objekten in der Vererbungskette des Objekts gemacht hat, mit dem Sie arbeiten. Daher die Empfehlung von Javascript-Code-Qualitätswerkzeugen wie jshint und jslint zu verwenden hasOwnProperty.
ErikE

6

Wenn in IE9 die Konsole nicht geöffnet ist, lautet dieser Code:

alert(typeof console);

zeigt "Objekt", aber diesen Code

alert(typeof console.log);

löst eine TypeError-Ausnahme aus, gibt jedoch keinen undefinierten Wert zurück;

Die garantierte Version des Codes sieht also ungefähr so ​​aus:

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

6

Ich verwende nur console.log in meinem Code. Also habe ich einen sehr kurzen 2 Liner dabei

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

1
Wie es funktioniert .. .Ich sehe keine console.log-Zeile im IE-Browser gedruckt, ich habe mit 2 verschiedenen Systemen getestet, in denen in 1 - console.log funktioniert und 2 System es nicht ist. Ich habe versucht, in beiden, aber nicht in der Lage, ein Protokoll in beiden Systemen zu sehen.
Kiran

2

Es wurde festgestellt, dass OP Firebug mit IE verwendet. Nehmen Sie also an, es handelt sich um Firebug Lite . Dies ist eine unkonventionelle Situation, da die Konsole im IE definiert wird, wenn das Debugger-Fenster geöffnet wird. Was passiert jedoch, wenn Firebug bereits ausgeführt wird? Ich bin mir nicht sicher, aber vielleicht ist die Methode "firebugx.js" ein guter Weg, um in dieser Situation zu testen:

Quelle:

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

(aktualisierte Links 12/2014)



1

Überprüfen Sie zum Debuggen im IE dieses log4javascript


Das ist großartig, zumal meine IE8-Konsole nichts ausgibt.
Firsh - LetsWP.io

1
@Firsh Danke für deine Kommentare.
Praveen

1
Ich habe hier nach dem Kommentar zu einer anderen Frage gesucht, die "schamlose Eigenwerbung" lautete, oder ich kenne - ähnlich - nicht jemanden, der sagte, er habe diesen Scipt erstellt, oder? Ich habe diesen Tab bereits geschlossen. Auf jeden Fall ist es ein wirklich tolles Tool und sehr nützlich für mein Projekt.
Firsh - LetsWP.io

1
@Firsh Ich habe dieses Skript nicht erstellt, ich bin eine Person wie Sie, die mit dem Tool profitiert hat.
Praveen

1

Für IE8- oder Konsolenunterstützung, die auf console.log beschränkt ist (kein Debug, Trace, ...), können Sie Folgendes tun:

  • Wenn console ODER console.log undefiniert ist: Erstellen Sie Dummy-Funktionen für Konsolenfunktionen (Trace, Debug, Log, ...)

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

  • Andernfalls, wenn console.log definiert ist (IE8) UND console.debug (irgendein anderes) nicht definiert ist: Leiten Sie alle Protokollierungsfunktionen zu console.log um, damit diese Protokolle beibehalten werden können!

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

Ich bin mir nicht sicher, ob Assert in verschiedenen IE-Versionen unterstützt wird, aber Vorschläge sind willkommen. Diese Antwort wurde auch hier veröffentlicht: Wie kann ich die Konsolenprotokollierung in Internet Explorer verwenden?



1

Konsolenstummel 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

Sie können das Folgende verwenden, um einen zusätzlichen Versicherungsgrad zu erhalten, bei dem alle Grundlagen abgedeckt sind. Die Verwendung von typeoffirst vermeidet undefinedFehler. Durch ===die Verwendung wird auch sichergestellt, dass der Name des Typs tatsächlich die Zeichenfolge "undefiniert" ist. Schließlich möchten Sie der Funktionssignatur einen Parameter hinzufügen (ich habe ihn logMsgwillkürlich ausgewählt), um die Konsistenz zu gewährleisten, da Sie alles, was Sie drucken möchten, an die Konsole an die Protokollfunktion übergeben. Auf diese Weise bleiben Sie auch intelligent und vermeiden Warnungen / Fehler in Ihrer JS-fähigen IDE.

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


0

Es ist ein ähnliches Problem beim Ausführen von console.log in untergeordneten Fenstern in IE9 aufgetreten, das von der Funktion window.open erstellt wurde.

Es scheint, dass in diesem Fall die Konsole nur im übergeordneten Fenster definiert und in untergeordneten Fenstern undefiniert ist, bis Sie sie aktualisieren. Gleiches gilt für Kinder von Kinderfenstern.

Ich behebe dieses Problem, indem ich das Protokoll in die nächste Funktion einbinde (unten ist ein Fragment des Moduls).

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

Nachdem ich so viele Probleme mit dieser Sache hatte (es ist schwierig, den Fehler zu debuggen, da der Fehler beim Öffnen der Entwicklerkonsole nicht mehr auftritt!), Entschied ich mich, einen Overkill-Code zu erstellen, um mich nie wieder damit beschäftigen zu müssen:

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

Persönlich verwende ich immer nur console.log und console.error, aber dieser Code behandelt alle anderen Funktionen, wie im Mozzila Developer Network gezeigt: https://developer.mozilla.org/en-US/docs/Web/API/console . Setzen Sie diesen Code einfach oben auf Ihre Seite und Sie sind für immer damit fertig.


-11

Sie können console.log (...) direkt in Firefox verwenden, jedoch nicht in IEs. In IEs müssen Sie window.console verwenden.


11
console.log und window.console.log verweisen in jedem Browser auf dieselbe Funktion, die sogar remote mit ECMAscript kompatibel ist. Es wird empfohlen, Letzteres zu verwenden, um zu vermeiden, dass eine lokale Variable versehentlich das globale Konsolenobjekt überschattet. Dies hat jedoch absolut nichts mit der Wahl des Browsers zu tun. console.log funktioniert in IE8 einwandfrei, und AFAIK bietet in IE6 / 7 überhaupt keine Protokollierungsfunktion.
Tgr
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.