'console' Internet Explorer için tanımlanmamış bir hatadır


375

Firebug kullanıyorum ve gibi bazı ifadeler var:

console.log("...");

sayfamda. IE8'de (muhtemelen önceki sürümler de) 'console' undefined olduğunu belirten komut dosyası hataları alıyorum. Bunu sayfamın en üstüne koymayı denedim:

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

hala hataları alıyorum. Hatalardan kurtulmanın herhangi bir yolu var mı?


4
typeofif(typeof console === "undefined") { var console = { log: function (logMsg) { } }; }
If'nizde

21
console.log () yalnızca IE'nin dev aracı açıkken çalışır (evet IE boktan). bkz. stackoverflow.com/questions/7742781/…
Adrien Be



1
@Aprilyon bağlantısı kopuk, bunun yerine bunu kullanın: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Alfred Bez

Yanıtlar:


378

Deneyin

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

Tanımlanmamış bir değişken doğrudan yönlendirilemez. Bununla birlikte, tüm global değişkenler, global bağlamın aynı adının ( windowtarayıcılar durumunda) nitelikleridir ve tanımlanmamış bir özniteliğe erişim iyidir.

Veya if (typeof console === 'undefined') console = ...sihirli değişkenden kaçınmak için kullanın window, bkz. @Tim Down cevabı .


160
Bunu kullanan herkese açık olmak <script type="text/javascript"> if (!window.console) console = {log: function() {}}; </script>için sayfanızın en üstüne yerleştirin ! Teşekkürler Kenny.
windowsgm

11
Peki yavar console = console || { log: function() {} };
devlord

9
@lorddev Bu stenoyu kullanmak için şunları eklemeniz gerekir window:var console = window.console || { log: function() {} };
jlengstorf

64
Lanet olsun ... En sevdiğiniz tarayıcı için güzel bir web sitesi oluşturuyorsunuz. Sonunda tüm diğer MODERN tarayıcılarıyla uyumlu hale getirmek için 4-5 SAAT harcarsınız ve daha sonra IE ile uyumlu hale getirmek için 4-5 GÜN harcarsınız.
İsrail

6
Bu cevapla ilgili sorun, hata ayıklama, uyarma, konsol eksikliği olan bir istisna atacak tarayıcı ile sayım gibi başka bir ad kullanıyorsanız, stackoverflow.com/a/16916941/2274855
Vinícius Moraes

319

Aşağıdakileri JavaScript'inizin üstüne yapıştırın (konsolu kullanmadan önce):

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

İşlev kapatma sarmalayıcısı, değişkenleri herhangi bir değişken tanımlamayacak şekilde kapsamalıdır. Bu tanımsız hem karşı korumalar consoleve tanımsız console.debug(ve diğer eksik yöntemleri).

EDIT: HTML5 Boilerplate (muhtemelen) güncel tutulur bir çözüm arıyorsanız, js / plugins.js dosyasında benzer bir kod kullandığını fark ettim .


14
Bu cevap neden bu kadar az oy veriyor? Burada yayınlananlardan en eksiksiz olanı.
mavilein

Tarih yüzünden. Doğru çalışma çözümlerine kesinlikle katılıyorum. Bu konunun yönetilmesi gerektiğini düşünüyorum. Kötü İngilizce için üzgünüm.
woto

Günlüğe kaydetmeyi günlük işlevine (varsa) yeniden yönlendirmeye çalışmaması dışında tamamen tamamlanır, böylece tüm günlükler kaybolur
Christophe Roussy

5
Bu tam olarak ne zaman olur? Bu kod yalnızca henüz tanımlanmamış öğeleri tanımlamalıdır.
Peter Tseng

4
Her iki şekilde de düşünüyorum - (function () {...} ()) veya (function () {...}) () - gerçekten işe yarıyor
Peter Tseng

73

Başka bir alternatif typeofoperatördür:

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

Başka bir alternatif de kendi log4javascript'im gibi bir günlük kütüphanesi kullanmaktır .


Bununla birlikte, kayıt dışı görevlendirmeyi uygun bir bildirime dönüştürmek iyi bir fikir olacaktır.
kanguru

1
Bunu mu demek istediniz var? Bu sadece burada bir şeyler karıştırırdı. Yoksa window.consoleyerine atamak mı istiyorsunuz console?
Tim Down

Kullanma var. Neden burada bir şeyler karıştı?
kanguru

2
Ne kafa karıştırıcı bir tartışma. Orjinal cevaba +1. +2 verebilirsem, size log4javascript için bir bağlantı sağladım. Teşekkürler OP!
Jay Taylor

8
@yckart: No. typeofbir dize döndürme garantilidir ve "undefined"bir dizedir. İki işlenen aynı türde olduğunda ==ve ===tam olarak aynı adımları gerçekleştirecek şekilde belirtildiğinde. Kullanmak typeof x == "undefined", xherhangi bir kapsamda ve herhangi bir ECMAScript 3 uyumlu ortamda tanımsız olup olmadığını test etmek için sağlam bir yoldur .
Tim Down

47

Daha sağlam bir çözüm için, bu kod parçasını kullanın (twitter'ın kaynak kodundan alınmıştır):

// 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

Senaryolarımda, ya stenoyu kullanıyorum:

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

veya her console.log satırını düzenlemek mümkün değilse veya mümkün değilse, sahte bir konsol oluşturuyorum:

// 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
Sözdizimi hatası. Neden sadeceif(!console) {console = {} ; console.log = function(){};}
Meekohi

1
Ya da sadece!window.console && (window.console = { log: function () { } });
Maksim Vi.

10

Sen kullanabilirsiniz console.log()varsa Developer ToolsIE8 açtı ve ayrıca kullanabileceğiniz içinde Consolekomut sekmesinde metin kutusu.


7
Konsol kodunu değiştirmeyi unutursanız bu iyi değildir.
IE8'deki

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

1
uyarı emptor: bu, thisatıfta bulunulan küresel düzeyde tanımlanmalıdır window.
Sgnl

7

Tarafından verilen iki önceki cevaba dayanarak

ve

İşte sorun için en iyi çaba uygulaması, yani gerçekten var olan bir console.log varsa, console.log aracılığıyla var olmayan yöntemler için boşlukları doldurur.

Örneğin IE6 / 7 için günlüğe kaydetmeyi uyarıyla (aptal ama çalışır) değiştirebilir ve sonra aşağıdaki canavarı (ona konsol.js olarak adlandırdım) dahil edebilirsiniz: [Uygun gördüğünüz gibi yorumları kaldırmaktan çekinmeyin, referans olarak bıraktım, bir minimizer bunlarla başa çıkabilir]:

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

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

methods.hasOwnProperty(method) && For döngüsüne ihtiyacımız olup olmadığından emin değilim .
TWiStErRob

Eminim ihtiyacın var.
ErikE

Chrome konsolunda hızlı bir test yaptı: > x = { a: 1, b: 2}-> Object {a: 1, b: 2}ve for(var f in x) {console.log(f + " " + x[f]);} 'end'-> a 1 b 2 "end". Bu nedenle, oluşturulan bir anonim nesnenin ek bir özelliği yoktur ve methodssadece fordöngüden önce oluşturulur . Yukarıdakileri hacklemek mümkün mü?
TWiStErRob

3
Evet. var x = { a: 1, b: 2}; Object.prototype.surprise = 'I\'m in yer objectz'; for (var f in x) {console.log(f, x[f]);}Bir kütüphanenin üzerinde çalıştığınız nesnenin miras zincirindeki nesnelere ne yaptığını asla bilemezsiniz. Böylece javintcript javint ve jslint gibi kaliteli kod araçlarını kullanmak için tavsiye hasOwnProperty.
ErikE

6

IE9'da, konsol açılmamışsa, bu kod:

alert(typeof console);

"nesne" i gösterir, ancak bu kod

alert(typeof console.log);

TypeError istisnasını atar, ancak tanımsız değeri döndürmez;

Yani, garantili kod sürümü şuna benzer:

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

6

Kodumda yalnızca console.log kullanıyorum. Bu yüzden çok kısa bir 2 astar içeriyorum

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

1
Nasıl çalışıyor ... IE tarayıcısına basılmış herhangi bir console.log satırı görmüyorum, ben 1 - console.log çalışıyor ve 2 sistem değil 2 farklı sistemleri ile test ettim. ben de denedim ama her iki sistemde herhangi bir günlük görmek mümkün değil.
kiran

2

OP'nin Firebug'u IE ile kullandığını fark etti, bu yüzden Firebug Lite olduğunu varsayın . Hata ayıklayıcı penceresi açıldığında konsol IE'de tanımlandığı için korkak bir durumdur, ancak Firebug zaten çalışıyorsa ne olur? Emin değilim, ama belki de "firebugx.js" yöntemi bu durumda test etmenin iyi bir yolu olabilir:

kaynak:

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

(güncellenmiş bağlantılar 12/2014)



1

IE'de hata ayıklamak için bu log4javascript'e göz atın


Bu harika, özellikle IE8 konsolum hiçbir şey çıkarmıyor.
Firsh - LetsWP.io

1
@Firsh Yorumlarınız için teşekkürler.
Praveen

1
Burada 'utanmaz öz tanıtım' diyen başka bir soru üzerine yorum arıyordum ya da bilmiyorum - benzer - bu scipt'i yarattığını söyleyen biri, sen miydin? O sekmeyi zaten kapattım. Her neyse, bu gerçekten harika bir araç ve projem için çok yararlı.
Firsh - LetsWP.io

1
@Firsh Bu senaryoyu ben yaratmadım, sizin gibi aracı kullanarak faydalanmış biriyim.
Praveen

1

IE8 veya console.log ile sınırlı konsol desteği (hata ayıklama, izleme yok ...) için aşağıdakileri yapabilirsiniz:

  • Konsol VEYA console.log tanımsızsa: Konsol işlevleri (izleme, hata ayıklama, günlük, ...) için kukla işlevler oluşturma

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

  • Console.log tanımlıysa (IE8) VE console.debug (başka herhangi bir tanımlı) tanımlanmadıysa: tüm günlükleme işlevlerini console.log'a yönlendirin, bu bu günlüklerin tutulmasına izin verir!

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

Çeşitli IE sürümlerinde iddia desteği hakkında emin değilim, ancak herhangi bir öneri bekliyoruz. Ayrıca bu yanıtı burada yayınladı: Internet Explorer'da konsol günlüğünü nasıl kullanabilirim?



1

TypeScript'te konsol saplaması:

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

Tüm üsleri kapsayan ekstra bir sigorta derecesi vermek için aşağıdakileri kullanabilirsiniz. typeofİlk kullanıldığında undefinedhatalar önlenir. Kullanılması ===, tür adının aslında "tanımsız" dizesi olmasını da sağlayacaktır. Son olarak, logMsgtutarlılığı sağlamak için işlev imzasına ( isteğe bağlı olarak seçtim ) bir parametre eklemek isteyeceksiniz , çünkü konsola yazdırmak istediğiniz her şeyi günlük işlevine geçirirsiniz. Bu ayrıca sizi doğru tutar ve JS bilinçli IDE'nizdeki uyarıları / hataları önler.

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


0

Window.open işlevi tarafından oluşturulan IE9'daki alt pencerelerde console.log çalıştırılırken benzer bir sorunla karşılaşıldı.

Bu durumda, konsol yalnızca üst pencerede tanımlanmış ve alt pencerelerde siz onları yenileyinceye kadar tanımlanmamıştır. Aynı durum çocuk pencerelerinin çocukları için de geçerlidir.

Bir sonraki işlevde günlüğü sararak bu sorunu ele alıyorum (aşağıda modül parçası)

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

Bu şeyle ilgili çok fazla sorun yaşadıktan sonra (geliştirici konsolunu açarsanız hata artık gerçekleşmediğinden hatayı hata ayıklamak zordur!)

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

Kişisel olarak Ben sadece console.log ve console.error kullanıyorum, ancak bu kod Mozzila Geliştirici Ağı'nda gösterildiği gibi diğer tüm işlevleri işler: https://developer.mozilla.org/en-US/docs/Web/API/console . Sadece bu kodu sayfanızın üstüne koyun ve sonsuza kadar bununla işiniz bitti.


-11

Console.log (...) öğesini doğrudan Firefox'ta kullanabilirsiniz, ancak IE'lerde kullanamazsınız. IE'lerde window.console kullanmanız gerekir.


11
console.log ve window.console.log, herhangi bir tarayıcıda ECMAscript ile uzaktan bile uyumlu olan aynı işleve karşılık gelir. İkincisini, küresel konsol nesnesini yanlışlıkla gölgelemek için yerel bir değişkeni önlemek için kullanmak iyi bir uygulamadır, ancak bunun tarayıcı seçimiyle kesinlikle bir ilgisi yoktur. console.log IE8'de iyi çalışıyor ve AFAIK IE6 / 7'de hiç kayıt yeteneği yok.
Tgr
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.