Por que o JavaScript funciona apenas depois de abrir as ferramentas de desenvolvedor no IE uma vez?

638

Bug do IE9 - JavaScript só funciona depois de abrir as ferramentas do desenvolvedor uma vez.

Nosso site oferece downloads gratuitos de pdf para os usuários e possui uma função simples "digite a senha para fazer o download". No entanto, ele não funciona no Internet Explorer.

Você pode ver por si mesmo neste exemplo .

O passe de download é "makeuseof". Em qualquer outro navegador, ele funciona bem. No IE, os dois botões não fazem nada.

A coisa mais curiosa que achei é que, se você abrir e fechar a barra de ferramentas do desenvolvedor com F12, tudo de repente começa a funcionar.

Tentamos o modo de compatibilidade e nada faz a diferença.

Como faço para isso funcionar no Internet Explorer?

James Bruce
fonte
3
use o invólucro em vários navegadores: github.com/MichaelZelensky/log.js
Michael Zelensky
1
Uma boa alternativa, se você tiver uma etapa de compilação, é usar algo como gulp-strip-debug. Ele remove todos os console.*métodos, ótimos para compilações de produção ou testes no IE.
knownasilya
15
Para futuros googlers: eu tive os mesmos sintomas, mas no IE11. Bem, descobriu-se que a resposta não estava relacionada console, mas ao meu uso de angular e cache de solicitações get. Veja as respostas aqui e aqui para mais.
Christoffer Lette
@ChristofferLette Sim, eu tenho o mesmo problema, por favor verifique stackoverflow.com/questions/31428126/... código funciona adequadamente quando as ferramentas de desenvolvedores é aberto ..
Pranav Bilurkar
5
A coisa mais irritante sobre problemas como esse? Eles são quase impossíveis de depurar porque começam a funcionar assim que você abre o console do desenvolvedor.
precisa saber é o seguinte

Respostas:

815

Parece que você pode ter algum código de depuração no seu javascript.

A experiência que você está descrevendo é típica de código que contém console.log()ou qualquer outra consolefuncionalidade.

O consoleobjeto é ativado apenas quando a barra de ferramentas Dev é aberta. Antes disso, a chamada do objeto do console resultaria na notificação de undefined. Depois que a barra de ferramentas for aberta, o console existirá (mesmo que a barra de ferramentas seja fechada posteriormente), para que as chamadas do console funcionem.

Existem algumas soluções para isso:

O mais óbvio é passar pelo seu código removendo referências a console. Você não deveria deixar coisas assim no código de produção.

Se você deseja manter as referências do console, você pode agrupá-las em uma if()instrução ou em alguma outra condição que verifique se o objeto do console existe antes de tentar chamá-lo.

Spudley
fonte
8
Existem soluções alternativas para deixar o código de depuração? IE é o único navegador com este comportamento fútil ...
Meekohi
94
if(!console) {console={}; console.log = function(){};}
Meekohi
79
@Meekohi if(!console)causará o mesmo erro - ele deve ler-seif(!window.console)
mindplay.dk
9
então ... O IE não deveria implementar um recurso que todo novo js dev usa o tempo todo, para evitar irritar alguns desenvolvedores que usavam um script para corrigir o que deveria ter funcionado em primeiro lugar ... mas é injusto bater o IE por isso? Você é uma pessoa muito generosa Spudley !!! :)
Jordan Davis
7
Ainda acontece com IE11
Michael
162

O HTML5 Boilerplate possui um bom código pré-fabricado para corrigir problemas no console:

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

Como @ mais apontado nos comentários, a versão mais recente está disponível na página do GitHub

Tallmaris
fonte
8
O link no comentário do @plus não é mais válido. O código foi empurrado para baixo em uma srcsub-dir: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Christoffer Lette
153

Aqui está outro motivo possível além do console.logproblema (pelo menos no IE11):

Quando o console não está aberto, o IE faz um cache bastante agressivo, portanto, verifique se todas as $.ajaxchamadas ou XMLHttpRequestchamadas têm cache definido como false.

Por exemplo:

$.ajax({cache: false, ...})

Quando o console do desenvolvedor está aberto, o armazenamento em cache é menos agressivo. Parece ser um bug (ou talvez um recurso?)

user3916095
fonte
9
Isso acabou de me salvar;) Obrigado! Eu diria que é um bug, pois você deve ter as mesmas condições para testar e depurar seu site com o console aberto e fechado.
Chnoch 6/03/2015
Trabalhou para mim. Especificamente: stackoverflow.com/questions/13391563/…
user1062589
2
isso deve ser maior, pois acho que é a resposta real ... a resposta aceita em relação ao console.log em alguma versão do IE gerará um erro, não causou o comportamento descrito aqui.
Migs
63

Isso resolveu meu problema depois que eu fiz uma pequena alteração. Eu adicionei o seguinte na minha página html para corrigir o problema do IE9:

<script type="text/javascript">
    // IE9 fix
    if(!window.console) {
        var console = {
            log : function(){},
            warn : function(){},
            error : function(){},
            time : function(){},
            timeEnd : function(){}
        }
    }
</script>
runas
fonte
1
Esta solução não funciona no IE 11 no Windows 7 de 64 bits.
Vikram
1
Isso resolveu meu problema no IE 11 no Windows 7 de 64 bits.
Zonyang 19/04/19
29

Além do consoleproblema de uso mencionado na resposta aceita e outras, há pelo menos outro motivo pelo qual, às vezes, as páginas no Internet Explorer funcionam apenas com as ferramentas de desenvolvedor ativadas.

Quando o Developer Tools está ativado, o IE realmente não usa seu cache HTTP (pelo menos por padrão no IE 11), como no modo normal.

Isso significa que se o seu site ou página tiver um problema de armazenamento em cache (se o cache for maior do que deveria, por exemplo - esse foi o meu caso), você não verá esse problema no modo F12. Portanto, se o javascript fizer algumas solicitações AJAX em cache, elas podem não funcionar como esperado no modo normal e funcionar bem no modo F12.

Simon Mourier
fonte
1
Consulte stackoverflow.com/questions/3984961/… para saber como desativar as solicitações xmlHttpReq em cache.
Michael Ross
1
Doce. Isso surpreendentemente funcionou. Eu acho que o serviço $ http da Angular não armazena em cache o busto como eu pensava.
17

Eu acho que isso poderia ajudar, adicionando isso antes de qualquer tag de javascript:

try{
  console
}catch(e){
   console={}; console.log = function(){};
}
todotresde
fonte
11
try catchdetectar que uma variável existe é uma má ideia. Não é apenas lento, mas se você tiver mais de uma instrução no bloco try, poderá obter uma exceção por um motivo diferente. Não use isso, pelo menos usoif (typeof console == 'undefined')
Juan Mendes
8

Se você estiver usando o AngularJS versão 1.X, poderá usar o serviço $ log em vez de usar o console.log diretamente.

Serviço simples para log. A implementação padrão grava com segurança a mensagem no console do navegador (se presente).

https://docs.angularjs.org/api/ng/service/$log

Então, se você tem algo semelhante a

angular.module('logExample', [])
  .controller('LogController', ['$scope', function($scope) {
    console.log('Hello World!');
 }]);

você pode substituí-lo por

angular.module('logExample', [])
  .controller('LogController', ['$scope', '$log', function($scope, $log) {
    $log.log('Hello World!');
 }]);

O Angular 2+ não possui nenhum serviço de log interno .

Oskar S.
fonte
Isso me ajudou, thanks- para qualquer outra pessoa usando typescript, este é o "ILogService" nas definições angulares
DannykPowell
O IIRC usando $ log faz com que o local da instrução de log seja obscurecido, diferente do uso do console.log. Não é tão bom com a minha experiência durante o desenvolvimento.
JesseDahl
5

Se você estiver usando angulare ie 9, 10ou edgeuse:

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

Para desativar completamente cache .

Itsik Mauyhas
fonte
4

Isso aconteceu no IE 11 para mim. E eu estava chamando a função jquery .load. Então, eu fiz da maneira antiga e coloquei algo no URL para desativar o cache.

$("#divToReplaceHtml").load('@Url.Action("Action", "Controller")/' + @Model.ID + "?nocache=" + new Date().getTime());
Vilhelm
fonte
2

Eu tenho mais uma alternativa para as soluções oferecidas por runas e todotresde que também evitam as armadilhas discutidas nos comentários à resposta de Spudley :

        try {
            console.log(message);
        } catch (e) {
        }

É um pouco desajeitado, mas por outro lado é conciso e abrange todos os métodos de registro cobertos na resposta das runas e tem a enorme vantagem de poder abrir a janela do console do IE a qualquer momento e os logs entrarem.

schnatterer
fonte
0

Encontramos o problema no IE 11 no Windows 7 e no Windows 10. Descobrimos qual era exatamente o problema ativando os recursos de depuração do IE (IE> Opções da Internet> guia Avançado> Navegação> Desmarcar a opção Desativar depuração de script (Internet Explorer) ). Esse recurso geralmente é verificado em nosso ambiente pelos administradores do domínio.

O problema foi porque estávamos usando o console.debug(...)método dentro do nosso código JavaScript. A suposição feita pelo desenvolvedor (eu) era que eu não queria nada escrito se o console do Developer Tools do cliente não estivesse explicitamente aberto. Enquanto o Chrome e o Firefox pareciam concordar com essa estratégia, o IE 11 não gostou nem um pouco. Ao alterar todas as console.debug(...)instruções para console.log(...)instruções, conseguimos continuar registrando informações adicionais no console do cliente e visualizando-as quando estavam abertas, mas, caso contrário, as escondíamos do usuário comum.

gregsonian
fonte
0

Eu coloquei a resolução e corrijo o meu problema. Parece que a solicitação AJAX que eu coloquei no meu JavaScript não estava sendo processada porque minha página estava com algum problema de cache. se o seu site ou página tiver um problema de armazenamento em cache, você não o verá no modo de desenvolvedores / F12. meu JavaScript em cache AJAX solicita que ele não funcione conforme o esperado e quebre a execução, que F12 não tem nenhum problema. Então, acabei de adicionar um novo parâmetro para tornar o cache falso.

$.ajax({
  cache: false,
});

Parece que o IE precisa especificamente que isso seja falso, para que a atividade AJAX e javascript funcionem bem.

pauldx
fonte