gratis - habilitar javascript en chrome en windows
console.log timestamps en Chrome? (11)
¿Hay alguna forma rápida de obtener Chrome timestamps en las console.log
de console.log
(como Firefox). ¿O antepone new Date().getTime()
la única opción?
Convierto arguments
en Array usando Array.prototype.slice
para que pueda concat
con otra matriz de lo que quiero agregar, luego lo paso a console.log.apply(console, /*here*/)
;
var log = function () {
return console.log.apply(
console,
[''[''+new Date().toISOString().slice(11,-5)+'']''].concat(
Array.prototype.slice.call(arguments)
)
);
};
log([''foo'']); // [18:13:17] ["foo"]
Parece que los arguments
pueden ser Array.prototype.unshift
ed también, pero no sé si modificarlo así es una buena idea / tendrá otros efectos secundarios
var log = function () {
Array.prototype.unshift.call(
arguments,
''[''+new Date().toISOString().slice(11,-5)+'']''
);
return console.log.apply(console, arguments);
};
log([''foo'']); // [18:13:39] ["foo"]
En Chrome, existe la opción Configuración de la consola (Herramientas del desarrollador -> Consola -> Configuración [esquina superior derecha]) llamada "Mostrar marcas de tiempo", que es exactamente lo que necesitaba.
Lo acabo de encontrar. No se necesitan otros hacks sucios que destruyan los marcadores de posición y borren el lugar en el código donde se registraron los mensajes.
Esto agrega una función de "registro" al alcance local (usando this
) usando tantos argumentos como desee:
this.log = function() {
var args = [];
args.push(''['' + new Date().toUTCString() + ''] '');
//now add all the other arguments that were passed in:
for (var _i = 0, _len = arguments.length; _i < _len; _i++) {
arg = arguments[_i];
args.push(arg);
}
//pass it all into the "real" log function
window.console.log.apply(window.console, args);
}
Entonces puedes usarlo:
this.log({test: ''log''}, ''monkey'', 42);
Produce algo como esto:
[Lun, 11 de Mar de 2013 16:47:49 GMT] Objeto {test: "log"} monkey 42
Lo tengo en la mayoría de las aplicaciones de Node.JS. También funciona en el navegador.
function log() {
const now = new Date();
const currentDate = `[${now.toISOString()}]: `;
const args = Array.from(arguments);
args.unshift(currentDate);
console.log.apply(console, args);
}
Prueba esto también:
this.log = console.log.bind( console, ''['' + new Date().toUTCString() + '']'' );
Esta función coloca la marca de tiempo, el nombre de archivo y el número de línea como el mismo console.log
incorporado.
Prueba esto:
console.logCopy = console.log.bind(console);
console.log = function(data)
{
var currentDate = ''['' + new Date().toUTCString() + ''] '';
this.logCopy(currentDate, data);
};
O esto, en caso de que quiera una marca de tiempo:
console.logCopy = console.log.bind(console);
console.log = function(data)
{
var timestamp = ''['' + Date.now() + ''] '';
this.logCopy(timestamp, data);
};
Para registrar más de una cosa y de una manera agradable (como la representación de árbol de objetos):
console.logCopy = console.log.bind(console);
console.log = function()
{
if (arguments.length)
{
var timestamp = ''['' + Date.now() + ''] '';
this.logCopy(timestamp, arguments);
}
};
Con cadena de formato ( JSFiddle )
console.logCopy = console.log.bind(console);
console.log = function()
{
// Timestamp to prepend
var timestamp = new Date().toJSON();
if (arguments.length)
{
// True array copy so we can call .splice()
var args = Array.prototype.slice.call(arguments, 0);
// If there is a format string then... it must
// be a string
if (typeof arguments[0] === "string")
{
// Prepend timestamp to the (possibly format) string
args[0] = "%o: " + arguments[0];
// Insert the timestamp where it has to be
args.splice(1, 0, timestamp);
// Log the whole array
this.logCopy.apply(this, args);
}
else
{
// "Normal" log
this.logCopy(timestamp, args);
}
}
};
Salidas con eso:
PD: probado solo en Chrome.
PPS: Array.prototype.slice
no es perfecto aquí, ya que se registraría como una matriz de objetos en lugar de como una serie.
Puede usar el perfil de herramientas dev.
console.time(''Timer name'');
//do critical time stuff
console.timeEnd(''Timer name'');
El "nombre del temporizador" debe ser el mismo. Puede usar varias instancias de temporizador con diferentes nombres.
Si desea conservar la información del número de línea (cada mensaje apuntando a su llamada .log (), no todos apuntando a nuestro contenedor), debe usar .bind()
. Puede anteponer un argumento de marca de tiempo adicional a través de console.log.bind(console, <timestamp>)
pero el problema es que necesita volver a ejecutar esto cada vez para vincular una función con una nueva marca de tiempo. Una forma incómoda de hacer eso es una función que devuelve una función vinculada:
function logf() {
// console.log is native function, has no .bind in some browsers.
// TODO: fallback to wrapping if .bind doesn''t exist...
return Function.prototype.bind.call(console.log, console, yourTimeFormat());
}
que luego debe usarse con una doble llamada:
logf()(object, "message...")
PERO podemos hacer la primera llamada implícita al instalar una property con la función getter:
var origLog = console.log;
// TODO: fallbacks if no `defineProperty`...
Object.defineProperty(console, "log", {
get: function () {
return Function.prototype.bind.call(origLog, console, yourTimeFormat());
}
});
Ahora simplemente llama a console.log(...)
y automágicamente, ¡precede una marca de tiempo!
> console.log(12)
71.919s 12 VM232:2
undefined
> console.log(12)
72.866s 12 VM233:2
undefined
Incluso puede lograr este comportamiento mágico con un simple log()
lugar de console.log()
haciendo Object.defineProperty(window, "log", ...)
.
Consulte https://github.com/pimterry/loglevel para obtener un envoltorio de consola seguro y bien hecho que usa .bind()
, con .bind()
compatibilidad.
Consulte https://github.com/eligrey/Xccessors para ver los defineProperty()
compatibilidad de defineProperty()
a la API heredada __defineGetter__
. Si ninguna de las API de propiedades funciona, debe recurrir a una función de contenedor que obtiene una nueva marca de tiempo cada vez. (En este caso, perderá la información del número de línea, pero las indicaciones de fecha y hora seguirán apareciendo).
Boilerplate: formato de tiempo de la manera que me gusta:
var timestampMs = ((window.performance && window.performance.now) ?
function() { return window.performance.now(); } :
function() { return new Date().getTime(); });
function formatDuration(ms) { return (ms / 1000).toFixed(3) + "s"; }
var t0 = timestampMs();
function yourTimeFormat() { return formatDuration(timestampMs() - t0); }
Si está utilizando el navegador Google Chrome, puede usar la API de Chrome:
- console.time: llámalo en el punto de tu código donde quieras iniciar el temporizador
- console.timeEnd: llámalo para detener el temporizador
El tiempo transcurrido entre estas dos llamadas se muestra en la consola.
Para obtener información detallada, consulte el enlace de documentación: https://developers.google.com/chrome-developer-tools/docs/console
Un refinamiento en la respuesta de JSmyth:
console.logCopy = console.log.bind(console);
console.log = function()
{
if (arguments.length)
{
var timestamp = new Date().toJSON(); // The easiest way I found to get milliseconds in the timestamp
var args = arguments;
args[0] = timestamp + '' > '' + arguments[0];
this.logCopy.apply(this, args);
}
};
Esta:
- muestra las marcas de tiempo con milisegundos
- asume una cadena de formato como primer parámetro para
.log
+new Date
y Date.now()
son formas alternativas de obtener marcas de tiempo