Le site Web avec JS ne fonctionne pas dans IE9 jusqu'à ce que les outils de développement soient activés

Je développe un site Web complexe qui tire fortement sur jQuery et plusieurs scripts. Sur la charge du site, aucun de mes scripts ne fonctionne (bien que je puisse confirmer que les autres scripts fonctionnent bien). Je ne publierais pas une question si moche ici sur SE sauf pour une chose:

L'instant où j'ai frappé F12 pour activer les outils de développement afin que je puisse répartir mon problème, tout fonctionne instantanément parfaitement!

Pire encore, si je ferme le navigateur, démarrez-le, activez Dev Tools d'abord et visitez le site, tout fonctionne comme prévu.

Je ne peux même pas déborder le problème endommagé car Dev Tools le corrige! Qu'est-ce que Dev Tools devrait faire pour que les choses fonctionnent? Est-ce que cela modifie l'UA (je fais une détection jQuery.browser)? Est-ce qu'il fait quelque chose à faire?

MODIFIER

Toute la journalisation de ma console est enveloppée dans la fonction utilitaire wrapper suivante:

function log(msg){ if (console){ console.log(msg); } } 

Toutes les idées ou suggestions que je pourrais essayer seront les bienvenues. Je vais poster ici si je trouve une solution.

J'apprécie que je sois assez en retard pour la fête ici, mais j'ai une solution pour IE9 qui est un peu différente.

 (function() { var temp_log = []; function log() { if (console && console.log) { for (var i = 0; i < temp_log.length; i++) { console.log.call(window, temp_log[i]); } console.log.call(window, arguments); } else { temp_log.push(arguments); } } })(); 

Fondamentalement, au lieu de console.log vous utilisez le log . Si console.log existe, il fonctionne normalement, sinon il stocke les entrées de journal dans un tableau et les produit sur le prochain log où la console est disponible.

Ce serait bien s'il a poussé les données dès que la console est disponible, mais cela coûte moins cher que la mise en place d'un écouteur d'occultation configuré personnalisé.

Fonction mise à jour (1er octobre 2012)

J'ai mis à jour ce script pour mon propre usage et j'ai pensé que je le partagerais. Il a quelques améliorations dignes:

  • Utiliser console.log() comme normal, c'est-à-dire ne plus avoir besoin d'utiliser un log() non standard log()
  • Prend en charge plusieurs arguments, p.ex. console.log('foo', 'bar')
  • Vous pouvez également utiliser console.error , console.warn et console.info (mais les console.log tant que console.log )
  • Le script vérifie la console native tous les 1000 ms et produit le tampon lorsqu'il est trouvé

Je pense qu'avec ces améliorations, cela est devenu une cote assez solide pour IE9. Consultez le compte GitHub ici .

 if (!window.console) (function() { var __console, Console; Console = function() { var check = setInterval(function() { var f; if (window.console && console.log && !console.__buffer) { clearInterval(check); f = (Function.prototype.bind) ? Function.prototype.bind.call(console.log, console) : console.log; for (var i = 0; i < __console.__buffer.length; i++) f.apply(console, __console.__buffer[i]); } }, 1000); function log() { this.__buffer.push(arguments); } this.log = log; this.error = log; this.warn = log; this.info = log; this.__buffer = []; }; __console = window.console = new Console(); })(); 

Vous avez des appels de console, dans IE, ceux-ci échoueront si les outils de développement ne sont pas ouverts. Une solution simple consiste à envelopper les appels de la console dans une fonction comme:

 function log(msg) { if(console) console.log(msg); } 

Je l'ai piraté de la manière suivante

 <script type="text/javascript"> (function () { if (typeof console == "undefined") { console = { log : function () {} } } })(); </script> 

Et c'est le premier élément de script dans le.

La plupart des autres solutions devraient fonctionner très bien, mais voici une courte liner si vous ne vous souciez pas d'attraper des messages de journal si la console n'est pas disponible.

 // Stub hack to prevent errors in IE console = window.console || { log: function() {} }; 

Cela vous permet d'utiliser encore la fonction native console.log directement au lieu de l'enrouler avec n'importe quoi ou d'avoir un conditionnement à chaque fois.

Je trouve qu'il est plus pratique d'utiliser simplement console && console.log('foo', 'bar', 'baz') plutôt que d'utiliser une fonction wrapper.

Le code que vous avez fourni:

 function logError(msg){ if (console) { console.log(msg); } else { throw new Error(msg); } } 

Produira une erreur pour IE lorsque les outils dev sont fermés car la console sera indéfinie.

Le wrapper console.log que j'ai utilisé n'était pas suffisant pour détecter la console dans IE9. Voici l'emballage qui fonctionne à partir d'une question connexe sur SE :

 function logError(msg){ try { console.log(msg); } catch (error) { throw new Error(msg); } } function log(msg){ try { console.log(msg); } catch (error) { } } 

Un test approprié pour la disponibilité de l'objet de la console serait: if (typeof console === "undefined" || typeof console.log === "undefined")

Si vous avez plusieurs fichiers de script parallèles, peut-être que les fichiers sont chargés / exécutés dans un ordre différent avec les outils de développement activés / désactivés.

J'ai rencontré cette question plusieurs fois. Fondamentalement, avec les variables, nous faisons cela pour vérifier si elles sont valides

 var somevar; if (somevar) //do code 

Cela fonctionne car somevar se résoudra à indéfini. Mais si vous vérifiez une propriété de fenêtre par exemple. Window.console.

 if (console) <---- this throws an exception 

Vous ne pouvez pas faire le même contrôle. Le navigateur le traite différemment. Fondamentalement, cela ne fait que cela

 if (window.console) <---- will NOT throw an exception if undefined //some code 

Cela fonctionnera comme le premier exemple. Vous devez donc modifier votre code pour

 function log(msg){ if (window.console){ console.log(msg); } }