Warum funktioniert JavaScript nur nach einmaligem Öffnen der Entwicklertools im IE?

IE9 Bug - JavaScript funktioniert nur nach einmaligem Öffnen der Entwicklertools.

Unsere Website bietet Benutzern kostenlose PDF-Downloads und verfügt über eine einfache Funktion zum Eingeben des Passworts zum Herunterladen. In Internet Explorer funktioniert dies jedoch überhaupt nicht.

Sie können sich in diesem Beispiel selbst davon überzeugen .

Der Download-Pass lautet "makeuseof". In jedem anderen Browser funktioniert es einwandfrei. Im IE tun beide Schaltflächen nichts.

Das Merkwürdigste, was ich gefunden habe, ist, dass beim Öffnen und Schließen der Entwickler-Symbolleiste mit F12 plötzlich alles funktioniert.

Wir haben den Kompatibilitätsmodus ausprobiert und so macht nichts einen Unterschied.

Wie mache ich das in Internet Explorer?

Es hört sich so an, als hätten Sie möglicherweise Debugging-Code in Ihrem Javascript.

Die Erfahrung, die Sie beschreiben, ist typisch für Code, der console.log()oder eine der anderen consoleFunktionen enthält.

Das consoleObjekt wird nur aktiviert, wenn die Dev-Symbolleiste geöffnet wird. Zuvor führt der Aufruf des Konsolenobjekts dazu, dass es als gemeldet wird undefined. Nachdem die Symbolleiste geöffnet wurde, ist die Konsole vorhanden (auch wenn die Symbolleiste anschließend geschlossen wird), sodass Ihre Konsolenaufrufe dann funktionieren.

Hierfür gibt es einige Lösungen:

Am naheliegendsten ist es, Ihren Code durchzugehen und Verweise auf zu entfernen console. Sie sollten solche Dinge sowieso nicht im Produktionscode belassen.

Wenn Sie die Konsolenreferenzen beibehalten möchten, können Sie sie in eine if()Anweisung oder eine andere Bedingung einschließen, die prüft, ob das Konsolenobjekt vorhanden ist, bevor Sie versuchen, es aufzurufen.

HTML5 Boilerplate enthält einen schönen vorgefertigten Code zur Behebung von Konsolenproblemen:

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

Wie in Kommentaren kommentiert, ist die neueste Version auf der GitHub-Seite verfügbar

Hier ist ein weiterer möglicher Grund neben dem console.logProblem (zumindest in IE11):

Wenn die Konsole nicht geöffnet ist, führt der IE ein ziemlich aggressives Caching durch. Stellen Sie daher sicher, dass bei $.ajaxAnrufen oder XMLHttpRequestAnrufen das Caching auf false gesetzt ist.

Zum Beispiel:

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

Wenn die Entwicklerkonsole geöffnet ist, ist das Caching weniger aggressiv. Scheint ein Fehler zu sein (oder vielleicht eine Funktion?)

Dies löste mein Problem, nachdem ich eine kleine Änderung daran vorgenommen hatte. Ich habe auf meiner HTML-Seite Folgendes hinzugefügt, um das IE9-Problem zu beheben:

<script type="text/javascript">
    // IE9 fix
    if(!window.console) {
        var console = {
            log : function(){},
            warn : function(){},
            error : function(){},
            time : function(){},
            timeEnd : function(){}
        }
    }
</script>

Neben dem consolein der akzeptierten Antwort und anderen erwähnten Nutzungsproblem gibt es zumindest einen weiteren Grund, warum Seiten in Internet Explorer manchmal nur mit aktivierten Entwicklertools funktionieren.

Wenn Developer Tools aktiviert ist, verwendet der IE seinen HTTP-Cache nicht wirklich (zumindest standardmäßig in IE 11) wie im normalen Modus.

Wenn Ihre Site oder Seite ein Caching-Problem aufweist (wenn beispielsweise mehr zwischengespeichert wird als erwartet - das war mein Fall), wird dieses Problem im F12-Modus nicht angezeigt. Wenn das Javascript also einige zwischengespeicherte AJAX-Anforderungen ausführt, funktionieren diese im normalen Modus möglicherweise nicht wie erwartet und im F12-Modus einwandfrei.

Ich denke, dies könnte helfen, indem Sie dies vor jedem Tag von Javascript hinzufügen:

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

Wenn Sie AngularJS Version 1.X verwenden, können Sie den Dienst $ log verwenden, anstatt console.log direkt zu verwenden.

Einfacher Service für die Protokollierung. Die Standardimplementierung schreibt die Nachricht sicher in die Konsole des Browsers (falls vorhanden).

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

Also, wenn Sie etwas Ähnliches haben

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

Sie können es durch ersetzen

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

Angular 2+ verfügt über keinen integrierten Protokolldienst .

Wenn Sie verwenden angularund dh 9, 10oder edgeverwenden:

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

Vollständig deaktivieren cache.

Es ist in IE 11 für mich passiert. Und ich habe die Funktion jquery .load aufgerufen. Also habe ich es auf die altmodische Weise gemacht und etwas in die URL eingefügt, um das Cacheing zu deaktivieren.

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

Ich habe noch eine Alternative für die von runeks und todotresde angebotenen Lösungen erhalten , die auch die Fallstricke vermeidet, die in den Kommentaren zu Spudleys Antwort diskutiert wurden :

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

Es ist ein bisschen ungepflegt, aber auf der anderen Seite ist es prägnant und deckt alle Protokollierungsmethoden ab, die in der Antwort von runeks behandelt werden. Es hat den großen Vorteil, dass Sie das Konsolenfenster des IE jederzeit öffnen können und die Protokolle eingehen .

Wir sind auf dieses Problem unter IE 11 unter Windows 7 und Windows 10 gestoßen. Wir haben herausgefunden, was genau das Problem war, indem wir die Debugging-Funktionen für IE aktiviert haben (IE> Internetoptionen> Registerkarte Erweitert> Durchsuchen> Deaktivieren Sie das Deaktivieren des Skript-Debugging (Internet Explorer) ). Diese Funktion wird normalerweise in unserer Umgebung von den Domänenadministratoren aktiviert.

Das Problem war, dass wir die console.debug(...)Methode in unserem JavaScript-Code verwendeten. Der Entwickler (ich) ging davon aus, dass ich nichts schreiben wollte, wenn die Client Developer Tools-Konsole nicht explizit geöffnet war. Während Chrome und Firefox dieser Strategie zuzustimmen schienen, gefiel es IE 11 kein bisschen. Durch Ändern aller console.debug(...)Anweisungen in console.log(...)Anweisungen konnten wir weiterhin zusätzliche Informationen in der Clientkonsole protokollieren und anzeigen, wenn sie geöffnet waren. Andernfalls konnten wir sie vor dem typischen Benutzer verbergen.

Ich habe die Lösung festgelegt und mein Problem behoben. Es sieht so aus, als ob die AJAX-Anfrage, die ich in mein JavaScript eingefügt habe, nicht verarbeitet wurde, weil auf meiner Seite ein Cache-Problem aufgetreten ist. Wenn Ihre Site oder Seite ein Caching-Problem aufweist, wird dieses Problem im Entwickler- / F12-Modus nicht angezeigt. Mein zwischengespeichertes JavaScript AJAX fordert an, dass es möglicherweise nicht wie erwartet funktioniert und die Ausführung unterbrochen wird, was für F12 überhaupt kein Problem darstellt. Also gerade einen neuen Parameter hinzugefügt, um den Cache falsch zu machen.

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

Es sieht so aus, als ob IE dies speziell benötigt, um falsch zu sein, damit die AJAX- und Javascript-Aktivität gut läuft.