‘console’ é um erro indefinido para o Internet Explorer

Estou usando o Firebug e tenho algumas declarações como:

console.log("..."); 

na minha página. No IE8 (provavelmente versões anteriores também) recebo erros de script dizendo que ‘console’ é indefinido. Eu tentei colocar isso no topo da minha página:

  if (!console) console = {log: function() {}};  

Ainda recebo os erros. Qualquer maneira de se livrar dos erros?

Experimentar

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

Uma variável indefinida não pode ser referida diretamente. No entanto, todas as variables ​​globais são atributos do mesmo nome do contexto global ( window no caso de navegadores), e o access a um atributo indefinido é bom.

Ou use if (typeof console === 'undefined') console = ... se você quer evitar a window variables ​​mágicas, veja a resposta do @Tim Down .

Cole o seguinte na parte superior do seu JavaScript (antes de usar o console):

 /** * Protect window.console method calls, eg 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; } })(); 

O wrapper de fechamento de function tem como escopo as variables ​​para não definir nenhuma variável. Isso protege tanto o console indefinido quanto o indefinido console.debug (e outros methods ausentes).

EDIT: notei que HTML5 Boilerplate usa código semelhante em seu arquivo js / plugins.js, se você estiver procurando por uma solução que (provavelmente) será mantida atualizada.

Outra alternativa é o operador typeof :

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

Outra alternativa é usar uma biblioteca de registro, como o meu próprio log4javascript .

Para uma solução mais robusta, use este trecho de código (extraído do código fonte do 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; } } }()); 

Nos meus scripts, eu uso a abreviação:

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

ou, se não for possível ou viável editar todas as linhas console.log, eu crio um console falso:

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

Você pode usar console.log() se tiver Developer Tools no IE8 abertas e também pode usar a checkbox de texto Console na guia de script.

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

No IE9, se o console não estiver aberto, este código:

 alert(typeof console); 

mostrará “object”, mas este código

 alert(typeof console.log); 

lançará exceção TypeError, mas não retornará valor indefinido;

Portanto, a versão garantida do código será semelhante a esta:

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

Eu estou usando apenas o console.log no meu código. Então eu incluo um forro muito curto

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

Baseado em duas respostas anteriores de

  • Vinícius Moraes
  • Peter Tseng

e as documentações para

  • Internet Explorer (IE 10)
  • Safari (2012. 07. 23.)
  • Firefox (2013. 05. 20.)
  • Chrome (2013. 01. 25.) e Chrome (2012. 10. 04.)
  • e alguns dos meus conhecimentos

Aqui está uma implementação de melhor esforço para o problema, o que significa que se houver um console.log que realmente existe, ele preenche as lacunas para methods não existentes via console.log.

Por exemplo, para o IE6 / 7 você pode replace o registro pelo alerta (estúpido, mas funciona) e include o monstro abaixo (chamei de console.js): [Sinta-se à vontade para remover comentários como quiser, deixei-os para referência, um minimizador pode atacá-los]:

   

e console.js:

  /** * Protect window.console method calls, eg 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]; } } })(); 

Percebeu que o OP está usando o Firebug com o IE, portanto, assuma que é o Firebug Lite . Essa é uma situação complicada, pois o console é definido no IE quando a janela do depurador é aberta, mas o que acontece quando o Firebug já está em execução? Não tenho certeza, mas talvez o método “firebugx.js” possa ser uma boa maneira de testar nesta situação:

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

(links atualizados 12/2014)

Estou usando o fauxconsole ; Eu modifiquei o css um pouco para que parecesse melhor, mas funciona muito bem.

Para debugging no IE, confira este log4javascript

Para o IE8 ou suporte ao console limitado ao console.log (sem debugging, rastreio, …), você pode fazer o seguinte:

  • Se console OU console.log indefinido: Crie funções simuladas para funções do console (rastreio, debugging, log, …)

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

  • Senão, se console.log é definido (IE8) E console.debug (qualquer outro) não está definido: redirect todas as funções de log para console.log, isso permite manter esses logs!

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

Não tenho certeza sobre o suporte de declaração em várias versões do IE, mas quaisquer sugestões são bem-vindas. Também postei esta resposta aqui: Como posso usar o log do console no Internet Explorer?

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

Você pode usar o abaixo para dar um grau extra de seguro que você tem todas as bases cobertas. O uso de typeof primeiro evitará erros undefined . Usar === também garantirá que o nome do tipo seja realmente a string “undefined”. Finalmente, você vai querer adicionar um parâmetro à assinatura da function (eu escolhi o logMsg arbitrariamente) para garantir a consistência, já que você passa o que quer que seja impresso para o console na function de log. Isso também mantém o intellisense preciso e evita quaisquer avisos / erros em seu JS aware IDE.

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

Às vezes, o console funciona no IE8 / 9, mas falha em outros momentos. Esse comportamento errático depende se você tem as ferramentas do desenvolvedor abertas e está descrito na pergunta stackoverflow O IE9 suporta console.log e é uma function real?

Encontrou um problema semelhante ao executar o console.log em janelas filho no IE9, criado pela function window.open.

Parece que, nesse caso, o console é definido apenas na janela pai e é indefinido nas janelas filho até que você as atualize. O mesmo se aplica aos filhos de janelas filhas.

Eu lido com esse problema colocando o log na próxima function (abaixo está o fragment do módulo)

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

Esboço do console no 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: () => { }, } }; 

Depois de ter tantos problemas com isso (é difícil depurar o erro, pois se você abrir o console do desenvolvedor, o erro não acontece mais!) Eu decidi fazer um código exagerado para nunca precisar me preocupar com isso nunca mais:

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

Pessoalmente eu só uso console.log e console.error, mas este código lida com todas as outras funções, como mostrado na Mozzila Developer Network: https://developer.mozilla.org/en-US/docs/Web/API/console . Basta colocar esse código no topo da sua página e você está pronto para sempre com isso.

Você pode usar o console.log (…) diretamente no Firefox, mas não nos IEs. Nos IEs você tem que usar window.console.