timestamps console.log dans Chrome?
Existe-t-il un moyen rapide d’obtenir Chrome la sortie des horodatages dans console.log écrit (comme le fait Firefox). Ou est-ce que new Date().getTime() est la seule option?
Dans Chrome, l'option Paramètres de la console (Outils de développement -> Console -> Paramètres [coin supérieur droit]) est nommée "Afficher les horodatages", ce qui est exactement ce dont j'avais besoin.
Je viens de le trouver. Aucun autre pirate informatique sale n’est nécessaire pour détruire les espaces réservés et effacer la place dans le code où les messages ont été enregistrés.
Mise à jour pour Chrome 68+
Le paramètre "Afficher les horodatages" a été déplacé dans la sous-fenêtre Préférences des "Paramètres de DevTools", située dans le coin supérieur droit du tiroir de DevTools:
Essaye ça:
console.logCopy = console.log.bind(console);
console.log = function(data)
{
var currentDate = '[' + new Date().toUTCString() + '] ';
this.logCopy(currentDate, data);
};
Ou ceci, si vous voulez un horodatage:
console.logCopy = console.log.bind(console);
console.log = function(data)
{
var timestamp = '[' + Date.now() + '] ';
this.logCopy(timestamp, data);
};
Pour enregistrer plus d'une chose et à la manière de Nice (comme une arborescence d'objets représentation):
console.logCopy = console.log.bind(console);
console.log = function()
{
if (arguments.length)
{
var timestamp = '[' + Date.now() + '] ';
this.logCopy(timestamp, arguments);
}
};
Avec la chaîne de formatage ( 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);
}
}
};
Sorties avec ça:
P.S .: Testé dans Chrome uniquement.
P.P.S .: Array.prototype.slice n'est pas parfait ici car il serait consigné sous la forme d'un tableau d'objets plutôt que d'une série de ceux de.
Vous pouvez utiliser le profileur d'outils dev.
console.time('Timer name');
//do critical time stuff
console.timeEnd('Timer name');
"Nom du minuteur" doit être identique. Vous pouvez utiliser plusieurs instances de timer avec des noms différents.
A l'origine, j'avais ajouté ceci en tant que commentaire, mais je voulais ajouter une capture d'écran car au moins une personne ne pouvait pas trouver l'option (ou peut-être que cela n'était pas disponible dans sa version particulière pour une raison quelconque).
Sur Chrome 68.0.3440.106 (et maintenant vérifié dans 72.0.3626.121), je devais
- outils de développement ouverts (F12)
- cliquez sur le menu à trois points en haut à droite
- cliquez sur les paramètres
- sélectionnez Préférences dans le menu de gauche
- cochez show timestamps dans la section Console de l'écran des paramètres
Je convertis arguments en Tableau à l'aide de Array.prototype.slice afin que je puisse concat avec un autre tableau de ce que je veux ajouter, puis transmettez-le à 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"]
_Il semble que arguments puisse être Array.prototype.unshift éd aussi, mais je ne sais pas si le modifier comme ceci est une bonne idée/aura d'autres effets secondaires
_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"]
_+new Date et Date.now() sont d'autres moyens d'obtenir des horodatages.
Si vous utilisez le navigateur Google Chrome, vous pouvez utiliser chrome console api:
- console.time: appelez-le à l'endroit du code où vous voulez démarrer le chronomètre
- console.timeEnd: appelez-le pour arrêter le chronomètre
Le temps écoulé entre ces deux appels est affiché dans la console.
Pour plus d'informations, consultez le lien vers la documentation: https://developers.google.com/chrome-developer-tools/docs/console
De Chrome 68:
"Afficher les horodatages" déplacé vers les paramètres
La case à cocher Afficher les horodatages précédemment dans Paramètres de la console Paramètres de la console a été déplacée vers Paramètres .
Essayez ceci aussi:
this.log = console.log.bind( console, '[' + new Date().toUTCString() + ']' );
Cette fonction place l’horodatage, le nom du fichier et le numéro de ligne comme identiques à ceux de console.log intégré.
Si vous souhaitez conserver les informations de numéro de ligne (chaque message pointant vers son appel .log (), pas tous pointant vers notre wrapper), vous devez utiliser .bind(). Vous pouvez ajouter un argument d'horodatage supplémentaire via console.log.bind(console, <timestamp>), mais le problème est que vous devez l'exécuter à chaque fois pour obtenir une fonction liée à un horodatage récent. Une façon maladroite de faire cela est une fonction qui retourne une fonction liée:
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());
}
qui doit ensuite être utilisé avec un double appel:
logf()(object, "message...")
MAIS nous pouvons rendre le premier appel implicite en installant une propriété avec la fonction getter:
var origLog = console.log;
// TODO: fallbacks if no `defineProperty`...
Object.defineProperty(console, "log", {
get: function () {
return Function.prototype.bind.call(origLog, console, yourTimeFormat());
}
});
Vous n’appelez plus que console.log(...) et il ajoute automatiquement un horodatage!
> console.log(12)
71.919s 12 VM232:2
undefined
> console.log(12)
72.866s 12 VM233:2
undefined
Vous pouvez même obtenir ce comportement magique avec un simple log() au lieu de console.log() en faisant Object.defineProperty(window, "log", ...).
Voir https://github.com/pimterry/loglevel pour un wrapper de console sécurisé bien réalisé utilisant .bind(), avec des solutions de remplacement de compatibilité.
Voir https://github.com/eligrey/Xccessors pour connaître les replis de compatibilité de defineProperty() à l'ancienne API __defineGetter__. Si aucune des API de propriété ne fonctionne, vous devez utiliser une fonction wrapper qui reçoit chaque fois un nouvel horodatage. (Dans ce cas, vous perdez les informations de numéro de ligne, mais les horodatages seront toujours affichés.)
Boilerplate: Le formatage du temps comme je les aime:
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); }
Ceci ajoute une fonction "log" à la portée locale (en utilisant this) en utilisant autant d'arguments que vous le souhaitez:
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);
}
Pour que vous puissiez l'utiliser:
this.log({test: 'log'}, 'monkey', 42);
Sort quelque chose comme ça:
[Lun., 11 mars 2013 16:47:49 GMT] Objet {test: "log"} singe 42
étendu le très agréable solution "avec chaîne de format" de JSmyth à également support
- toutes les autres
console.logvariations (log,debug,info,warn,error) - y compris paramètre de flexibilité de chaîne d'horodatage (par exemple,
09:05:11.518et2018-06-13T09:05:11.518Z) - incluant un repli dans le cas où
consoleou ses fonctions n'existent pas dans les navigateurs
.
var Utl = {
consoleFallback : function() {
if (console == undefined) {
console = {
log : function() {},
debug : function() {},
info : function() {},
warn : function() {},
error : function() {}
};
}
if (console.debug == undefined) { // IE workaround
console.debug = function() {
console.info( 'DEBUG: ', arguments );
}
}
},
/** based on timestamp logging: from: https://stackoverflow.com/a/13278323/1915920 */
consoleWithTimestamps : function( getDateFunc = function(){ return new Date().toJSON() } ) {
console.logCopy = console.log.bind(console)
console.log = function() {
var timestamp = getDateFunc()
if (arguments.length) {
var args = Array.prototype.slice.call(arguments, 0)
if (typeof arguments[0] === "string") {
args[0] = "%o: " + arguments[0]
args.splice(1, 0, timestamp)
this.logCopy.apply(this, args)
} else this.logCopy(timestamp, args)
}
}
console.debugCopy = console.debug.bind(console)
console.debug = function() {
var timestamp = getDateFunc()
if (arguments.length) {
var args = Array.prototype.slice.call(arguments, 0)
if (typeof arguments[0] === "string") {
args[0] = "%o: " + arguments[0]
args.splice(1, 0, timestamp)
this.debugCopy.apply(this, args)
} else this.debugCopy(timestamp, args)
}
}
console.infoCopy = console.info.bind(console)
console.info = function() {
var timestamp = getDateFunc()
if (arguments.length) {
var args = Array.prototype.slice.call(arguments, 0)
if (typeof arguments[0] === "string") {
args[0] = "%o: " + arguments[0]
args.splice(1, 0, timestamp)
this.infoCopy.apply(this, args)
} else this.infoCopy(timestamp, args)
}
}
console.warnCopy = console.warn.bind(console)
console.warn = function() {
var timestamp = getDateFunc()
if (arguments.length) {
var args = Array.prototype.slice.call(arguments, 0)
if (typeof arguments[0] === "string") {
args[0] = "%o: " + arguments[0]
args.splice(1, 0, timestamp)
this.warnCopy.apply(this, args)
} else this.warnCopy(timestamp, args)
}
}
console.errorCopy = console.error.bind(console)
console.error = function() {
var timestamp = getDateFunc()
if (arguments.length) {
var args = Array.prototype.slice.call(arguments, 0)
if (typeof arguments[0] === "string") {
args[0] = "%o: " + arguments[0]
args.splice(1, 0, timestamp)
this.errorCopy.apply(this, args)
} else this.errorCopy(timestamp, args)
}
}
}
} // Utl
Utl.consoleFallback()
//Utl.consoleWithTimestamps() // defaults to e.g. '2018-06-13T09:05:11.518Z'
Utl.consoleWithTimestamps( function(){ return new Date().toJSON().replace( /^.+T(.+)Z.*$/, '$1' ) } ) // e.g. '09:05:11.518'
J'ai cela dans la plupart des applications Node.JS. Cela fonctionne aussi dans le navigateur.
function log() {
const now = new Date();
const currentDate = `[${now.toISOString()}]: `;
const args = Array.from(arguments);
args.unshift(currentDate);
console.log.apply(console, args);
}
Un raffinement sur la réponse 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);
}
};
Cette:
- affiche les horodatages en millisecondes
- assume une chaîne de format comme premier paramètre à
.log