stempel waktu console.log di Chrome?

Apakah ada cara cepat untuk membuat Chrome mengeluarkan stempel waktu dalam console.logpenulisan (seperti yang dilakukan Firefox). Atau apakah menambahkan new Date().getTime()satu-satunya pilihan?

Di Chrome, ada opsi adalah Pengaturan Konsol (Alat Pengembang -> Konsol -> Pengaturan [sudut kanan atas]) bernama "Tampilkan cap waktu" yang persis seperti yang saya butuhkan.

Saya baru saja menemukannya. Tidak ada peretasan kotor lainnya yang diperlukan yang menghancurkan placeholder dan menghapus tempat di kode tempat pesan-pesan itu masuk.

Pembaruan untuk Chrome 68+

Pengaturan "Tampilkan stempel waktu" telah dipindahkan ke panel Preferensi dari "Pengaturan DevTools", ditemukan di sudut kanan atas laci DevTools:

Coba ini:

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

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

Atau ini, jika Anda menginginkan cap waktu:

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

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

Untuk mencatat lebih dari satu hal dan dengan cara yang baik (seperti representasi pohon objek):

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

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

Dengan format string ( 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);
        }
    }
};

Output dengan itu:

PS: Diuji hanya di Chrome.

PPS: Array.prototype.slicetidak sempurna di sini karena akan dicatat sebagai array objek daripada serangkaian objek.

Anda dapat menggunakan profiler alat dev.

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

"Nama pengatur waktu" harus sama. Anda dapat menggunakan beberapa instance timer dengan nama yang berbeda.

Saya awalnya menambahkan ini sebagai komentar, tetapi saya ingin menambahkan tangkapan layar karena setidaknya satu orang tidak dapat menemukan opsi (atau mungkin itu tidak tersedia dalam versi khusus mereka karena alasan tertentu).

Pada Chrome 68.0.3440.106 (dan sekarang diperiksa di 72.0.3626.121) saya harus

• alat pengembang terbuka (F12)
• klik menu tiga titik di kanan atas
• klik pengaturan
• pilih Preferensi di menu sebelah kiri
• periksa tampilkan cap waktu di bagian Konsol pada layar pengaturan

Saya mengkonversi argumentske Array menggunakan Array.prototype.slicesehingga saya bisa concatdengan Array lain dari apa yang ingin saya tambahkan, kemudian meneruskannya ke 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"]

Sepertinya itu argumentsbisa Array.prototype.unshiftdiedit juga, tapi saya tidak tahu apakah mengubahnya seperti ini adalah ide yang baik / akan memiliki efek samping lain

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 Datedan Date.now()merupakan cara alternatif untuk mendapatkan cap waktu

Jika Anda menggunakan browser Google Chrome, Anda dapat menggunakan api konsol chrome:

• console.time: panggil pada titik di kode Anda di mana Anda ingin memulai timer
• console.timeEnd: panggil untuk menghentikan timer

Waktu yang berlalu antara dua panggilan ini ditampilkan di konsol.

Untuk info detail, silakan lihat tautan dokumen: https://developers.google.com/chrome-developer-tools/docs/console

Dari Chrome 68:

"Tampilkan stempel waktu" dipindahkan ke pengaturan

Kotak centang Tampilkan stempel waktu sebelumnya di Pengaturan Konsol Pengaturan Konsol telah pindah ke Pengaturan .

Coba ini juga:

this.log = console.log.bind( console, '[' + new Date().toUTCString() + ']' );

Fungsi ini menempatkan stempel waktu, nama file, dan nomor baris sebagai sama dengan bawaan console.log.

Jika Anda ingin menyimpan informasi nomor baris (setiap pesan menunjuk ke panggilan .log (), tidak semua mengarah ke pembungkus kami), Anda harus menggunakannya .bind(). Anda dapat menambahkan argumen cap waktu tambahan melalui console.log.bind(console, <timestamp>)tetapi masalahnya adalah Anda harus menjalankannya kembali setiap kali untuk mendapatkan fungsi yang terikat dengan cap waktu baru. Cara canggung untuk melakukannya adalah fungsi yang mengembalikan fungsi terikat:

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

yang kemudian harus digunakan dengan panggilan ganda:

logf()(object, "message...")

TETAPI kita dapat membuat panggilan pertama tersirat dengan menginstal properti dengan fungsi pengambil:

var origLog = console.log;
// TODO: fallbacks if no `defineProperty`...
Object.defineProperty(console, "log", {
  get: function () { 
    return Function.prototype.bind.call(origLog, console, yourTimeFormat()); 
  }
});

Sekarang Anda hanya menelepon console.log(...)dan secara otomatis itu menambahkan cap waktu!

> console.log(12)
71.919s 12 VM232:2
undefined
> console.log(12)
72.866s 12 VM233:2
undefined

Anda bahkan dapat mencapai perilaku ajaib ini dengan sederhana log()alih-alih console.log()dengan melakukan Object.defineProperty(window, "log", ...).

Lihat https://github.com/pimterry/loglevel untuk menggunakan pembungkus konsol aman yang dilakukan dengan baik.bind() dengan kompatibilitas mundur.

Lihat https://github.com/eligrey/Xccessors untuk kompatibilitas mundur dari defineProperty()ke legacy __defineGetter__API. Jika tidak ada API properti yang berfungsi, Anda harus mundur ke fungsi wrapper yang mendapat cap waktu baru setiap waktu. (Dalam hal ini Anda kehilangan info nomor baris, tetapi cap waktu masih akan ditampilkan.)

Boilerplate: Waktu memformat seperti yang saya suka:

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); }

Ini menambahkan fungsi "log" ke lingkup lokal (menggunakan this) menggunakan argumen sebanyak yang Anda inginkan:

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); 
}

Jadi Anda bisa menggunakannya:

this.log({test: 'log'}, 'monkey', 42);

Keluaran sesuatu seperti ini:

[Senin, 11 Mar 2013 16:47:49 GMT] Obyek {test: "log"} monyet 42

memperluas solusi yang sangat bagus "dengan format string" dari JSmyth juga dukungan

• semua lainnya console.logvariasi ( log, debug, info, warn,error )
• termasuk param fleksibilitas string timestamp (mis 09:05:11.518vs.2018-06-13T09:05:11.518Z )
• termasuk fallback dalam kasus consoleatau fungsinya tidak ada di browser

.

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'

Saya memiliki ini di sebagian besar aplikasi Node.JS. Ini juga berfungsi di browser.

function log() {
  const now = new Date();
  const currentDate = `[${now.toISOString()}]: `;
  const args = Array.from(arguments);
  args.unshift(currentDate);
  console.log.apply(console, args);
}

Solusi ES6:

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

tempat timestamp()pengembalian sebenarnya memformat stempel waktu dan logmenambahkan stempel waktu dan menyebarkan semua argumen sendiriconsole.log

Penyempurnaan pada jawaban oleh 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);
    }
};

Ini:

• menunjukkan cap waktu dengan milidetik
• mengasumsikan string format sebagai parameter pertama ke .log