Risposte:
Ancora meglio per il fallback è questo:
var alertFallback = true;
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
if (alertFallback) {
console.log = function(msg) {
alert(msg);
};
} else {
console.log = function() {};
}
}
console.log è disponibile solo dopo aver aperto gli Strumenti per sviluppatori (F12 per aprirlo e chiuderlo). La cosa divertente è che dopo averlo aperto, puoi chiuderlo, quindi inviarlo tramite chiamate console.log e questi verranno visualizzati quando lo riapri. Sto pensando che sia un tipo di errore, e potrebbe essere risolto, ma vedremo.
Probabilmente userò solo qualcosa del genere:
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)
}
e ancora più semplice:
function trace(s) {
try { console.log(s) } catch (e) { alert(s) }
}
alert
è malvagio. Alcuni codici si comportano in modo diverso quando vengono utilizzati gli avvisi perché il documento perde lo stato attivo, rendendo i bug ancora più difficili da diagnosticare o creando quelli che prima non esistevano. Inoltre, se si lascia accidentalmente un console.log
nel proprio codice di produzione, è benigno (supponendo che non esploda) - accede silenziosamente alla console. Se si lascia accidentalmente un alert
nel codice di produzione, l'esperienza dell'utente viene rovinata.
Questa è la mia opinione sulle varie risposte. Volevo davvero vedere i messaggi registrati, anche se non avevo la console IE aperta quando venivano licenziati, quindi li spingo in un console.messages
array che creo. Ho anche aggiunto una funzione console.dump()
per facilitare la visualizzazione dell'intero registro. console.clear()
svuota la coda dei messaggi.
Questa soluzione "gestisce" anche gli altri metodi della console (che credo provengano tutti dall'API della console Firebug )
Infine, questa soluzione è sotto forma di IIFE , quindi non inquina l'ambito globale. L'argomento della funzione di fallback è definito nella parte inferiore del codice.
Lo lascio cadere nel mio file JS principale che è incluso in ogni pagina e me ne dimentico.
(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)
La linea var args = Array.prototype.slice.call(arguments);
crea una matrice dall'oggetto arguments
. Ciò è necessario perché gli argomenti non sono realmente una matrice .
trap()
è un gestore predefinito per una qualsiasi delle funzioni API. Passo gli argomenti in message
modo da ottenere un registro degli argomenti che sono stati passati a qualsiasi chiamata API (non solo console.log
).
Ho aggiunto un array extra console.raw
che cattura gli argomenti esattamente come passati trap()
. Mi sono reso conto che args.join(' ')
stava convertendo oggetti nella stringa "[object Object]"
che a volte potrebbe essere indesiderabile. Grazie bfontaine per il suggerimento .
trap
funzione var args = Array.prototype.slice.call(arguments); var message = args.join(' ');
:? Perché passi gli argomenti attraverso questo al messaggio?
Vale la pena notare che console.log
in IE8 non è una vera funzione Javascript. Non supporta i metodi apply
o call
.
console.log=Function.prototype.bind.call(console.log,console);
per aggirare questo.
bind
.
Supponendo che non ti interessi un fallback per avvisare, ecco un modo ancora più conciso per ovviare alle carenze di Internet Explorer:
var console=console||{"log":function(){}};
Mi piace molto l'approccio pubblicato da "orange80". È elegante perché puoi impostarlo una volta e dimenticarlo.
Gli altri approcci richiedono che tu faccia qualcosa di diverso (chiama console.log()
ogni volta qualcosa di diverso dal semplice ), che è solo per chiedere problemi ... So che alla fine dimenticherei.
Ho fatto un ulteriore passo avanti, avvolgendo il codice in una funzione di utilità che puoi chiamare una volta all'inizio del tuo javascript, ovunque fintanto che è prima di qualsiasi registrazione. (Lo sto installando nel prodotto del router di dati degli eventi della mia azienda. Aiuterà a semplificare la progettazione cross-browser della sua nuova interfaccia di amministrazione.)
/**
* 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() {}; }
}
}
/**/console.log("...");
quindi è facile cercare e individuare il codice temporaneo.
Se ottieni "undefined" per tutte le tue chiamate console.log, probabilmente significa che hai ancora un vecchio firebuglite caricato (firebug.js). Sostituirà tutte le funzioni valide di console.log di IE8 anche se esistono. Questo è quello che mi è successo comunque.
Verificare la presenza di altro codice che sovrascrive l'oggetto console.
La migliore soluzione per qualsiasi browser privo di 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;
}
}
}());
Ci sono così tante risposte. La mia soluzione per questo era:
globalNamespace.globalArray = new Array();
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
console.log = function(message) {globalNamespace.globalArray.push(message)};
}
In breve, se console.log non esiste (o in questo caso non è aperto), archiviare il registro in una matrice di spazi dei nomi globale. In questo modo, non sei infastidito da milioni di avvisi e puoi comunque visualizzare i tuoi registri con la console per sviluppatori aperta o chiusa.
if (window.console && 'function' === typeof window.console.log) { window.console.log (o); }
window.console.log()
potrebbe essere disponibile in IE8 anche quando console.log()
non lo è?
typeof window.console.log === "object"
non"function"
Ho trovato questo su 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 = {});
}
} ());
Sto usando l'approccio di Walter dall'alto (vedi: https://stackoverflow.com/a/14246240/3076102 )
Mescolo una soluzione che ho trovato qui https://stackoverflow.com/a/7967670 per mostrare correttamente gli oggetti.
Ciò significa che la funzione trap diventa:
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 />'));
}
}
}
Spero che questo sia utile:-)
Funziona in IE8. Apri gli strumenti di sviluppo di IE8 premendo F12.
>>console.log('test')
LOG: test
Mi piace questo metodo (usando pronto il documento di jquery) ... ti permette di usare la console anche in ie ... l'unico problema è che devi ricaricare la pagina se apri gli strumenti di sviluppo di ie dopo il caricamento della pagina ...
potrebbe essere più semplice tenendo conto di tutte le funzioni, ma utilizzo solo il registro, quindi è quello che faccio.
//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
}})();
}
});
Ecco una versione che accederà alla console quando gli strumenti di sviluppo sono aperti e non quando sono chiusi.
(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)
apply
metodo.
Crea la tua console in html .... ;-) Questo può essere impresso ma puoi iniziare con:
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);
}
};
}
console.log
è presente in IE8, ma l'console
oggetto non viene creato finché non si apre DevTools. Pertanto, una chiamata aconsole.log
può comportare un errore, ad esempio se si verifica al caricamento della pagina prima di avere la possibilità di aprire gli strumenti di sviluppo. La risposta vincente qui lo spiega in modo più dettagliato.