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

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?

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.

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

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?)

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>

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.

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

try{
  console
}catch(e){
   console={}; console.log = function(){};
}

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 .

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 .

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

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.

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.

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.