Pourquoi JavaScript ne fonctionne-t-il qu'après avoir ouvert une fois les outils de développement dans IE?


638

Bogue IE9 - JavaScript ne fonctionne qu'une fois les outils de développement ouverts.

Notre site propose des téléchargements gratuits de pdf aux utilisateurs, et il a une simple fonction "entrer le mot de passe pour télécharger". Cependant, cela ne fonctionne pas du tout dans Internet Explorer.

Vous pouvez voir par vous-même dans cet exemple .

Le pass de téléchargement est "makeuseof". Dans tout autre navigateur, cela fonctionne bien. Dans IE, les deux boutons ne font rien.

La chose la plus curieuse que j'ai trouvée est que si vous ouvrez et fermez la barre d'outils du développeur avec F12, tout commence soudainement à fonctionner.

Nous avons essayé le mode de compatibilité et tel, rien ne fait de différence.

Comment faire pour que cela fonctionne dans Internet Explorer?


3
utiliser le wrapper multi-navigateur: github.com/MichaelZelensky/log.js
Michael Zelensky

1
Une bonne alternative, si vous avez une étape de construction, est d'utiliser quelque chose comme gulp-strip-debug. Il supprime toutes les console.*méthodes, idéales pour les builds de production ou les tests dans IE.
knownasilya

15
Pour les futurs googleurs: j'ai eu les mêmes symptômes, mais dans IE11. Eh bien, il s'est avéré que la réponse n'était pas liée à console, mais à mon utilisation angulaire et à la mise en cache des requêtes get. Voir les réponses ici et ici pour en savoir plus.
Christoffer Lette du

@ChristofferLette Oui, j'ai le même problème s'il vous plaît vérifier stackoverflow.com/questions/31428126/… le code fonctionne correctement lorsque les outils de développement sont ouverts ..
Pranav Bilurkar

6
La chose la plus ennuyeuse à propos de problèmes comme celui-ci? Ils sont presque impossibles à déboguer car il commence à fonctionner dès que vous ouvrez la console développeur.
jlewkovich

Réponses:


815

Il semble que vous ayez du code de débogage dans votre javascript.

L'expérience que vous décrivez est typique du code qui contient console.log()ou toute autre consolefonctionnalité.

L' consoleobjet n'est activé que lorsque la barre d'outils de développement est ouverte. Avant cela, l'appel de l'objet console entraînera son rapport en tant que undefined. Une fois la barre d'outils ouverte, la console existera (même si la barre d'outils est fermée par la suite), vos appels de console fonctionneront alors.

Il existe quelques solutions à cela:

Le plus évident est de parcourir votre code en supprimant les références à console. De toute façon, vous ne devriez pas laisser des trucs comme ça dans le code de production.

Si vous souhaitez conserver les références de la console, vous pouvez les encapsuler dans une if()instruction ou une autre condition qui vérifie si l'objet console existe avant d'essayer de l'appeler.


8
Existe-t-il des solutions de contournement pour laisser le code de débogage dans? IE est le seul navigateur avec ce comportement
insensé

94
if(!console) {console={}; console.log = function(){};}
Meekohi

80
@Meekohi if(!console)provoquera la même erreur - il devrait lireif(!window.console)
mindplay.dk

9
donc ... IE ne devrait pas implémenter une fonctionnalité que chaque nouveau développeur js utilise tout le temps, pour éviter de déranger quelques développeurs qui ont utilisé un script pour corriger la chose qui aurait dû fonctionner en premier lieu ... mais c'est injuste frapper IE pour ça? Tu es une personne très généreuse Spudley !!! :)
Jordan Davis

7
Cela se produit toujours avec IE11
Michael

162

HTML5 Boilerplate a un joli code pré-fait pour résoudre les problèmes de 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;
        }
    }
}());

Comme @ plus indiqué dans les commentaires, la dernière version est disponible sur leur page GitHub


9
Le lien dans le commentaire de @plus n'est plus valide. Le code a été poussé dans un srcsous- répertoire
Christoffer Lette

153

Voici une autre raison possible en plus du console.logproblème (au moins dans IE11):

Lorsque la console n'est pas ouverte, IE effectue une mise en cache assez agressive, alors assurez-vous que la mise en cache de tous les $.ajaxappels ou XMLHttpRequestappels est définie sur false.

Par exemple:

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

Lorsque la console développeur est ouverte, la mise en cache est moins agressive. Semble être un bug (ou peut-être une fonctionnalité?)


9
Cela m'a juste sauvé;) Merci! Je dirais que c'est un bug car vous devriez avoir les mêmes conditions pour tester et déboguer votre site Web avec la console ouverte et fermée.
Chnoch

A travaillé pour moi. Plus précisément: stackoverflow.com/questions/13391563/…
user1062589

2
cela devrait être plus élevé car je pense que c'est la réponse réelle ... la réponse acceptée en ce qui concerne console.log dans une version IE va générer une erreur, pas à l'origine du comportement décrit ici.
Migs

63

Cela a résolu mon problème après y avoir apporté une modification mineure. J'ai ajouté ce qui suit dans ma page html afin de résoudre le problème IE9:

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

1
Cette solution ne fonctionne pas sur IE 11 sur Windows 7 64 bits.
Vikram

1
Cela a résolu mon problème sur IE 11 sur Windows 7 64 bits.
zonyang

29

Outre le consoleproblème d'utilisation mentionné dans la réponse acceptée et d'autres, il existe au moins une autre raison pour laquelle parfois les pages d'Internet Explorer ne fonctionnent qu'avec les outils de développement activés.

Lorsque les outils de développement sont activés, IE n'utilise pas vraiment son cache HTTP (au moins par défaut dans IE 11) comme il le fait en mode normal.

Cela signifie que si votre site ou votre page a un problème de mise en cache (s'il cache plus qu'il ne devrait par exemple - c'était mon cas), vous ne verrez pas ce problème en mode F12. Donc, si le javascript effectue certaines requêtes AJAX mises en cache, elles peuvent ne pas fonctionner comme prévu en mode normal et fonctionner correctement en mode F12.


1
Voir stackoverflow.com/questions/3984961/… pour savoir comment désactiver la mise en cache des requêtes xmlHttpReq.
Michael Ross

1
Doux. Cela a étonnamment fonctionné. Je suppose que le service $ http d'Angular ne cache pas le buste comme je le pensais.

17

Je suppose que cela pourrait aider, en ajoutant ceci avant toute balise de javascript:

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

11
try catchdétecter qu'une variable existe est une mauvaise idée. Non seulement c'est lent, mais si vous avez plus d'une instruction dans votre bloc try, vous pouvez obtenir une exception pour une raison différente. Ne l'utilisez pas, à tout le moins, utilisezif (typeof console == 'undefined')
Juan Mendes

8

Si vous utilisez AngularJS version 1.X, vous pouvez utiliser le service $ log au lieu d'utiliser directement console.log.

Service simple pour la journalisation. L'implémentation par défaut écrit en toute sécurité le message dans la console du navigateur (le cas échéant).

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

Donc, si vous avez quelque chose de similaire à

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

vous pouvez le remplacer par

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

Angular 2+ n'a pas de service de journal intégré .


cela m'a aidé, merci - pour toute autre personne utilisant le dactylographe, c'est le "ILogService" dans les définitions angulaires
DannykPowell

L'IIRC qui utilise $ log fait masquer l'emplacement de l'instruction log, contrairement à l'utilisation de console.log. Pas si bien d'après mon expérience pendant le développement.
JesseDahl

5

Si vous utilisez angularet c'est-à-dire 9, 10ou edgeutilisez:

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

Pour désactiver complètement cache.


4

C'est arrivé dans IE 11 pour moi. Et j'appelais la fonction jquery .load. Je l'ai donc fait à l'ancienne et j'ai mis quelque chose dans l'URL pour désactiver le cache.

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

2

J'ai encore une autre alternative pour les solutions proposées par runeks et todotresde qui évite également les pièges discutés dans les commentaires à la réponse de Spudley :

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

C'est un peu délicat mais d'un autre côté, il est concis et couvre toutes les méthodes de journalisation couvertes par la réponse de runeks et il a l'énorme avantage que vous pouvez ouvrir la fenêtre de console d'IE à tout moment et les journaux arrivent.


0

Nous avons rencontré ce problème sur IE 11 sur Windows 7 et Windows 10. Nous avons découvert quel était exactement le problème en activant les capacités de débogage pour IE (IE> Options Internet> onglet Avancé> Navigation> Décocher Désactiver le débogage de script (Internet Explorer) ). Cette fonctionnalité est généralement vérifiée dans notre environnement par les administrateurs de domaine.

Le problème était dû au fait que nous utilisions la console.debug(...)méthode dans notre code JavaScript. L'hypothèse faite par le développeur (moi) était que je ne voulais rien écrire si la console des outils de développement client n'était pas explicitement ouverte. Alors que Chrome et Firefox semblaient d'accord avec cette stratégie, IE 11 ne l'aimait pas du tout. En changeant toutes les console.debug(...)instructions en console.log(...)instructions, nous avons pu continuer à enregistrer des informations supplémentaires dans la console client et à les afficher lorsqu'elle était ouverte, mais sinon, à les cacher à l'utilisateur type.


0

J'ai mis la résolution et corrigé mon problème. On dirait que la demande AJAX que j'ai mise dans mon JavaScript n'était pas en cours de traitement car ma page avait un problème de cache. si votre site ou page a un problème de mise en cache, vous ne verrez pas ce problème en mode développeurs / F12. mon JavaScript AJAX mis en cache demande que cela ne fonctionne pas comme prévu et que l'exécution s'arrête, ce qui ne pose aucun problème à F12. Il suffit donc d'ajouter un nouveau paramètre pour rendre le cache faux.

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

Il semble qu'IE ait spécifiquement besoin que ce soit faux pour que l'activité AJAX et javascript fonctionne bien.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.