javascript - console.log tidsstempler i Chrome

Finnes det en rask måte å få Chrome til å vise tidsstempler i console.log-utskrifter (som Firefox gjør)?

Eller er det å sette new Date().getTime() foran den eneste muligheten?

Svar #1

I Chrome finnes det et alternativ i Konsollinnstillinger (enten trykk F1 eller velg Utviklerverktøy -> Konsoll -> Innstillinger [øverste høyre hjørne]) som heter "Vis tidsstempler", som er akkurat det jeg trengte.

Jeg har nettopp funnet det. Ingen andre skitne triks nødvendig som ødelegger plassholdere og sletter stedet i koden hvor meldingene ble logget fra.

Oppdatering for Chrome 68+

Innstillingen «Vis tidsstempler» har blitt flyttet til Preferanser-panelet i «DevTools-innstillinger», som finnes øverst til høyre i DevTools-skuffen:

Svar #2

Prøv dette:

console.logCopy = console.log.bind(console);

console.log = function(data)
{
    var currentDate = '[' + new Date().toUTCString() + '] ';
    this.logCopy(currentDate, data);
};

Eller dette, hvis du vil ha et tidsstempel:

console.logCopy = console.log.bind(console);

console.log = function(data)
{
    var timestamp = '[' + Date.now() + '] ';
    this.logCopy(timestamp, data);
};

Å logge mer enn én ting og på en fin måte (som en objekt-tre-representasjon):

console.logCopy = console.log.bind(console);

console.log = function()
{
    if (arguments.length)
    {
        var timestamp = '[' + Date.now() + '] ';
        this.logCopy(timestamp, arguments);
    }
};

Med en formatstreng (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);
        }
    }
};

Utganger med det:

P.S.: Testet kun i Chrome.

P.P.S.: Array.prototype.slice er ikke perfekt her, for det ville bli logget som et array av objekter i stedet for en serie av dem.

Svar #3

Jeg la opprinnelig til dette som en kommentar, men jeg ville legge til et skjermbilde siden minst én person ikke kunne finne alternativet (eller kanskje det ikke var tilgjengelig i deres spesielle versjon av en eller annen grunn).

På Chrome 68.0.3440.106 (og nå sjekket i 72.0.3626.121) måtte jeg

  • åpne utviklerverktøy (F12)
  • klikk på tre-punktsmenyen øverst til høyre
  • klikk innstillinger
  • velg Preferanser i venstremenyen
  • merk av for vis tidsstempler i konsollseksjonen på innstillingsskjermen

Svar #4

Du kan bruke utviklerverktøyets profiler.

console.time('Timer name');
//do critical time stuff
console.timeEnd('Timer name');

»Timer name« må være det samme. Du kan bruke flere instanser av timer med forskjellige navn.

Svar #5

Chrome-versjon 89.0.4389.90 (19.03.2021)

  1. Vis ruten «Utviklerverktøy» ved å trykke F12, eller klikk på 3-prikker ⠇-menyen i verktøylinjen -> Flere verktøy -> Utviklerverktøy.

  2. Finn og trykk på tannhjulikonet.

  3. Merk av Vis tidsstempler.

Svar #6

ES6-løsning:

const timestamp = () => `[${new Date().toUTCString()}]`
const log = (...args) => console.log(timestamp(), ...args)

der timestamp() faktisk returnerer formatert tidsstempel og log legger til et tidsstempel og viderefører alle egne argumenter til console.log

Svar #7

Oppdatering per for Chrome 98:

Innstillinger -> Preferanser -> Konsoll -> Vis tidsstempler

Fra Chrome 68:

"Vis tidsstempler" flyttet til innstillinger

Avmerkingsboksen for visning av tidsstempler som tidligere var under Konsollinnstillinger, har blitt flyttet til Innstillinger.

Relaterte artikler