Qu'est-il arrivé à console.log dans IE8?
Selon ce post c'était dans la version bêta, mais ce n'est pas dans la version?
Encore mieux pour le repli est le suivant:
var alertFallback = true;
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
if (alertFallback) {
console.log = function(msg) {
alert(msg);
};
} else {
console.log = function() {};
}
}
le fichier console.log n'est disponible qu'après avoir ouvert les outils de développement (F12 pour l'activer ou le désactiver). Ce qui est drôle, c’est qu’après l’avoir ouvert, vous pouvez le fermer, puis l’envoyer via des appels console.log, et ceux-ci seront visibles lors de la réouverture. Je pense qu’il s’agit d’un bogue qui pourrait être corrigé, mais nous verrons.
Je vais probablement utiliser quelque chose comme ceci:
function trace(s) {
if ('console' in self && 'log' in console) console.log(s)
// the line below you might want to comment out, so it dies silent
// but Nice for seeing when the console is available or not.
else alert(s)
}
et encore plus simple:
function trace(s) {
try { console.log(s) } catch (e) { alert(s) }
}
Ceci est mon point de vue sur les différentes réponses. Je voulais réellement voir les messages enregistrés, même si je n'avais pas la console IE ouverte quand ils ont été renvoyés. Je les ai donc poussés dans un tableau console.messages que je crée. J'ai également ajouté une fonction console.dump() pour faciliter la visualisation de tout le journal. console.clear() va vider la file d'attente des messages.
Cette solution "gère" également les autres méthodes de la console (qui, je crois, proviennent toutes de API de la console Firebug )
Enfin, cette solution se présente sous la forme d'un IIFE , de sorte qu'elle ne pollue pas la portée globale. L'argument de la fonction de repli est défini au bas du code.
Je viens de le déposer dans mon fichier maître JS qui est inclus sur chaque page, et oubliez-le.
(function (fallback) {
fallback = fallback || function () { };
// function to trap most of the console functions from the FireBug Console API.
var trap = function () {
// create an Array from the arguments Object
var args = Array.prototype.slice.call(arguments);
// console.raw captures the raw args, without converting toString
console.raw.Push(args);
var message = args.join(' ');
console.messages.Push(message);
fallback(message);
};
// redefine console
if (typeof console === 'undefined') {
console = {
messages: [],
raw: [],
dump: function() { return console.messages.join('\n'); },
log: trap,
debug: trap,
info: trap,
warn: trap,
error: trap,
assert: trap,
clear: function() {
console.messages.length = 0;
console.raw.length = 0 ;
},
dir: trap,
dirxml: trap,
trace: trap,
group: trap,
groupCollapsed: trap,
groupEnd: trap,
time: trap,
timeEnd: trap,
timeStamp: trap,
profile: trap,
profileEnd: trap,
count: trap,
exception: trap,
table: trap
};
}
})(null); // to define a fallback function, replace null with the name of the function (ex: alert)
Quelques infos supplémentaires
La ligne var args = Array.prototype.slice.call(arguments); crée un tableau à partir de l'objet arguments. Ceci est requis car les arguments ne sont pas vraiment un tablea .
trap() est un gestionnaire par défaut pour l'une des fonctions de l'API. Je passe les arguments à message pour que vous obteniez un journal des arguments transmis à tout appel d'API (pas seulement console.log).
Modifier
J'ai ajouté un tableau supplémentaire console.raw qui capture les arguments exactement tels qu'ils ont été transmis à trap(). J'ai réalisé que args.join(' ') convertissait des objets en chaîne "[object Object]", ce qui peut parfois être indésirable. Merci bfontaine pour le suggestion .
Il est à noter que console.log dans IE8 n'est pas une vraie fonction Javascript. Il ne prend pas en charge les méthodes apply ou call.
En supposant que vous ne vous inquiétiez pas d'une solution de rechange à l'alerte, voici un moyen encore plus concis de contourner les faiblesses d'Internet Explorer:
var console=console||{"log":function(){}};
J'aime beaucoup l'approche publiée par "orange80". C'est élégant parce que vous pouvez le régler une fois et l'oublier.
Les autres approches exigent que vous fassiez quelque chose de différent (appelez autre chose que de simples console.log() à chaque fois), qui ne font que demander des ennuis… Je sais que j'oublierais éventuellement.
J'ai franchi une étape supplémentaire en intégrant le code dans une fonction utilitaire que vous pouvez appeler une fois au début de votre javascript, n'importe où tant que c'est avant toute journalisation. (J'installe ceci dans le produit de routeur de données d'événements de mon entreprise. Cela simplifiera la conception multi-navigateurs de sa nouvelle interface d'administration.)
/**
* Call once at beginning to ensure your app can safely call console.log() and
* console.dir(), even on browsers that don't support it. You may not get useful
* logging on those browers, but at least you won't generate errors.
*
* @param alertFallback - if 'true', all logs become alerts, if necessary.
* (not usually suitable for production)
*/
function fixConsole(alertFallback)
{
if (typeof console === "undefined")
{
console = {}; // define it if it doesn't exist already
}
if (typeof console.log === "undefined")
{
if (alertFallback) { console.log = function(msg) { alert(msg); }; }
else { console.log = function() {}; }
}
if (typeof console.dir === "undefined")
{
if (alertFallback)
{
// THIS COULD BE IMPROVED… maybe list all the object properties?
console.dir = function(obj) { alert("DIR: "+obj); };
}
else { console.dir = function() {}; }
}
}
Si vous obtenez "indéfini" pour tous vos appels console.log, cela signifie probablement que vous avez toujours un ancien composant Firebuglite chargé (firebug.js). Il remplacera toutes les fonctions valides du fichier console.log d'IE8, même si elles existent. C'est ce qui m'est arrivé quand même.
Recherchez d'autres codes remplaçant l'objet console.
La meilleure solution pour tout navigateur sans console est:
// 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;
}
}
}());
Il y a tellement de réponses. Ma solution pour cela était:
globalNamespace.globalArray = new Array();
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
console.log = function(message) {globalNamespace.globalArray.Push(message)};
}
En bref, si console.log n'existe pas (ou dans ce cas, n'est pas ouvert), stockez le journal dans un tableau d'espace de noms global. Ainsi, vous n'êtes pas harcelé par des millions d'alertes et vous pouvez toujours afficher vos journaux avec la console de développement ouverte ou fermée.
if (window.console && 'function' === type de window.console.log) {
window.console.log (o);
}
Voici mon "IE s'il vous plaît ne pas planter"
typeof console=="undefined"&&(console={});typeof console.log=="undefined"&&(console.log=function(){});
J'utilise l'approche de Walter d'en haut (voir: https://stackoverflow.com/a/14246240/3076102 )
Je mélange une solution trouvée ici https://stackoverflow.com/a/796767 pour afficher correctement les objets.
Cela signifie que la fonction piège devient:
function trap(){
if(debugging){
// create an Array from the arguments Object
var args = Array.prototype.slice.call(arguments);
// console.raw captures the raw args, without converting toString
console.raw.Push(args);
var index;
for (index = 0; index < args.length; ++index) {
//fix for objects
if(typeof args[index] === 'object'){
args[index] = JSON.stringify(args[index],null,'\t').replace(/\n/g,'<br>').replace(/\t/g,' ');
}
}
var message = args.join(' ');
console.messages.Push(message);
// instead of a fallback function we use the next few lines to output logs
// at the bottom of the page with jQuery
if($){
if($('#_console_log').length == 0) $('body').append($('<div />').attr('id', '_console_log'));
$('#_console_log').append(message).append($('<br />'));
}
}
}
J'espère que ceci est utile:-)
J'ai trouvé ceci sur github :
// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function f() {
log.history = log.history || [];
log.history.Push(arguments);
if (this.console) {
var args = arguments,
newarr;
args.callee = args.callee.caller;
newarr = [].slice.call(args);
if (typeof console.log === 'object') log.apply.call(console.log, console, newarr);
else console.log.apply(console, newarr);
}
};
// make it safe to use console.log always
(function(a) {
function b() {}
for (var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","), d; !! (d = c.pop());) {
a[d] = a[d] || b;
}
})(function() {
try {
console.log();
return window.console;
} catch(a) {
return (window.console = {});
}
} ());
Faites votre propre console en html .... ;-) Cela peut être amélioré mais vous pouvez commencer avec:
if (typeof console == "undefined" || typeof console.log === "undefined") {
var oDiv=document.createElement("div");
var attr = document.createAttribute('id'); attr.value = 'html-console';
oDiv.setAttributeNode(attr);
var style= document.createAttribute('style');
style.value = "overflow: auto; color: red; position: fixed; bottom:0; background-color: black; height: 200px; width: 100%; filter: alpha(opacity=80);";
oDiv.setAttributeNode(style);
var t = document.createElement("h3");
var tcontent = document.createTextNode('console');
t.appendChild(tcontent);
oDiv.appendChild(t);
document.body.appendChild(oDiv);
var htmlConsole = document.getElementById('html-console');
window.console = {
log: function(message) {
var p = document.createElement("p");
var content = document.createTextNode(message.toString());
p.appendChild(content);
htmlConsole.appendChild(p);
}
};
}
Cela fonctionne dans IE8. Ouvrez les outils de développement de IE8 en appuyant sur F12.
>>console.log('test')
LOG: test
Voici une version qui se connectera à la console lorsque les outils de développement sont ouverts et non lorsqu'ils sont fermés.
(function(window) {
var console = {};
console.log = function() {
if (window.console && (typeof window.console.log === 'function' || typeof window.console.log === 'object')) {
window.console.log.apply(window, arguments);
}
}
// Rest of your application here
})(window)
J'aime cette méthode (en utilisant la documentation de jquery) ... elle vous permet d'utiliser la console même dans ie ... le seul problème est que vous devez recharger la page si vous ouvrez les outils de développement après le chargement de la page ...
cela pourrait être plus fluide en rendant compte de toutes les fonctions, mais je n'utilise que log, c'est donc ce que je fais.
//one last double check against stray console.logs
$(document).ready(function (){
try {
console.log('testing for console in itcutils');
} catch (e) {
window.console = new (function (){ this.log = function (val) {
//do nothing
}})();
}
});