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

638

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?

James Bruce
quelle
3
Verwenden Sie Cross-Browser-Wrapper: github.com/MichaelZelensky/log.js
Michael Zelensky
1
Eine gute Alternative, wenn Sie einen Build-Schritt haben, ist die Verwendung von so etwas gulp-strip-debug. Es entfernt alle console.*Methoden, die sich hervorragend für Produktions-Builds oder zum Testen im IE eignen.
bekanntasilya
15
Für zukünftige Googler: Ich hatte die gleichen Symptome, aber in IE11. Nun, es stellte sich heraus, dass die Antwort nicht mit consolemeiner Verwendung von Angular und Caching von Get-Anfragen zusammenhängt. Weitere Antworten finden Sie hier und hier .
Christoffer Lette
@ChristofferLette Ja, ich habe das gleiche Problem, bitte überprüfen Sie stackoverflow.com/questions/31428126/… Code funktioniert ordnungsgemäß, wenn Entwickler-Tools geöffnet wird ..
Pranav Bilurkar
5
Das nervigste an solchen Problemen? Das Debuggen ist fast unmöglich, da es funktioniert, sobald Sie die Entwicklerkonsole öffnen.
Jlewkovich

Antworten:

814

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.

Spudley
quelle
8
Gibt es Problemumgehungen, um Debugging-Code zu belassen? IE ist der einzige Browser mit diesem verrückten Verhalten ...
Meekohi
94
if(!console) {console={}; console.log = function(){};}
Meekohi
79
@ Meekohi if(!console)wird den gleichen Fehler verursachen - es sollte lautenif(!window.console)
mindplay.dk
9
Also ... IE sollte keine Funktion implementieren, die jeder neue js-Entwickler ständig verwendet, um nicht ein paar Entwickler zu ärgern, die ein Skript verwendet haben, um das Problem zu beheben, das eigentlich hätte funktionieren sollen ... aber es ist unfair IE dafür zu klopfen? Sie sind eine sehr großzügige Person Spudley !!! :)
Jordan Davis
7
Passiert immer noch mit IE11
Michael
162

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

Tallmaris
quelle
8
Der Link in @plus 'Kommentar ist nicht mehr gültig. Der Code wurde in ein srcUnterverzeichnis verschoben: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
Christoffer Lette
153

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

user3916095
quelle
9
Das hat mich gerade gerettet;) Danke! Ich würde sagen, es ist ein Fehler, da Sie die gleichen Bedingungen haben sollten, um Ihre Website bei geöffneter und geschlossener Konsole zu testen und zu debuggen.
Chnoch
Hat für mich gearbeitet. Insbesondere: stackoverflow.com/questions/13391563/…
user1062589
2
Dies sollte höher sein, da ich denke, dass dies die eigentliche Antwort ist. Die akzeptierte Antwort in Bezug auf console.log in einigen IE-Versionen wird einen Fehler auslösen, der das hier beschriebene Verhalten nicht verursacht.
Migs
63

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>
Runen
quelle
1
Diese Lösung funktioniert nicht unter IE 11 unter Windows 7 64-Bit.
Vikram
1
Dies löste mein Problem unter IE 11 unter Windows 7 64-Bit.
Zonyang
29

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.

Simon Mourier
quelle
1
Siehe stackoverflow.com/questions/3984961/... , wie zum Ausschalten vom Caching xmlHttpReq Anfragen.
Michael Ross
1
Süss. Das hat überraschend funktioniert. Ich denke, Angulars $ http-Dienst speichert die Pleite nicht so, wie ich es mir vorgestellt habe.
17

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

try{
  console
}catch(e){
   console={}; console.log = function(){};
}
todotresde
quelle
11
try catchzu erkennen, dass eine Variable existiert, ist eine schlechte Idee. Es ist nicht nur langsam, sondern wenn Sie mehr als eine Anweisung in Ihrem try-Block haben, können Sie aus einem anderen Grund eine Ausnahme erhalten. Verwenden Sie dies zumindest nichtif (typeof console == 'undefined')
Juan Mendes
8

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 .

Oskar S.
quelle
Dies hat mir geholfen, danke - für alle anderen, die Typoskript verwenden, ist dies der "ILogService" in den Winkeldefinitionen
DannykPowell
Wenn IIRC $ log verwendet, wird der Speicherort der Protokollanweisung im Gegensatz zur Verwendung von console.log verdeckt. Nicht so toll aus meiner Erfahrung während der Entwicklung.
JesseDahl
5

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.

Itsik Mauyhas
quelle
4

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());
Vilhelm
quelle
2

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 .

Schnatterer
quelle
0

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.

gregsonian
quelle
0

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.

pauldx
quelle