console.log timestamps ใน Chrome หรือไม่

มีวิธีใดที่รวดเร็วในการทำให้ Chrome ส่งออกการประทับเวลาเป็นลายลักษณ์อักษรconsole.log(เช่นเดียวกับ Firefox) หรือกำลังเติมnew Date().getTime()ตัวเลือกเท่านั้น?

ใน Chrome มีตัวเลือกคือการตั้งค่าคอนโซล (เครื่องมือสำหรับนักพัฒนา -> คอนโซล -> การตั้งค่า [มุมบนขวา]) ชื่อ "แสดงการประทับเวลา" ซึ่งเป็นสิ่งที่ฉันต้องการ

ฉันเพิ่งพบมัน ไม่มีแฮ็กสกปรกอื่น ๆ ที่ต้องการทำลายตัวยึดตำแหน่งและลบสถานที่ในรหัสที่ข้อความถูกบันทึกไว้

อัปเดตสำหรับ Chrome 68+

การตั้งค่า "Show timestamps" ถูกย้ายไปที่บานหน้าต่าง Preferences ของ "DevTools settings" ซึ่งอยู่ที่มุมขวาบนของลิ้นชัก DevTools:

ลองสิ่งนี้:

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

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

หรือสิ่งนี้ในกรณีที่คุณต้องการบันทึกเวลา:

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

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

หากต้องการบันทึกมากกว่าหนึ่งสิ่ง และเป็นวิธีที่ดี (เช่นการนำเสนอต้นไม้วัตถุ):

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

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

ด้วยสตริงรูปแบบ ( 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);
        }
    }
};

ผลลัพธ์ที่:

PS: ทดสอบใน Chrome เท่านั้น

PPS: Array.prototype.sliceไม่สมบูรณ์ที่นี่เพราะมันจะถูกบันทึกเป็นอาร์เรย์ของวัตถุมากกว่าชุดของเหล่านั้น

คุณสามารถใช้เครื่องมือ dev profiler

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

"ชื่อตัวตั้งเวลา" จะต้องเหมือนกัน คุณสามารถใช้ตัวจับเวลาหลายตัวพร้อมชื่อต่างกันได้

ฉันเพิ่มสิ่งนี้เป็นความคิดเห็น แต่ฉันต้องการเพิ่มภาพหน้าจอเนื่องจากอย่างน้อยหนึ่งคนไม่สามารถหาตัวเลือกได้ (หรืออาจจะไม่สามารถใช้งานได้ในบางรุ่น)

บน Chrome 68.0.3440.106 (และตอนนี้ตรวจสอบใน 72.0.3626.121) ฉันต้อง

• เครื่องมือ dev แบบเปิด (F12)
• คลิกเมนูสามจุดที่ด้านบนขวา
• คลิกการตั้งค่า
• เลือกการตั้งค่าในเมนูด้านซ้าย
• ตรวจสอบการแสดงเวลาประทับในส่วนคอนโซลของหน้าจอการตั้งค่า

ฉันแปลงargumentsเป็นอาเรย์ใช้Array.prototype.sliceเพื่อให้ฉันสามารถconcatอีกด้วยอาร์เรย์ของสิ่งที่ฉันต้องการเพิ่มแล้วผ่านมันลงไป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"]

ดูเหมือนว่าargumentsสามารถArray.prototype.unshiftแต่ฉันไม่รู้ว่าการแก้ไขเช่นนี้เป็นความคิดที่ดี / จะมีผลข้างเคียงอื่น ๆ หรือไม่

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และDate.now()เป็นวิธีอื่นในการรับการประทับเวลา

หากคุณใช้เบราว์เซอร์ Google Chrome คุณสามารถใช้ chrome console api:

• console.time: เรียกมันที่จุดในรหัสของคุณที่คุณต้องการเริ่มจับเวลา
• console.timeEnd: เรียกมันเพื่อหยุดจับเวลา

เวลาที่ผ่านไประหว่างการโทรสองครั้งนี้จะปรากฏในคอนโซล

สำหรับข้อมูลรายละเอียดโปรดดูลิงก์ doc: https://developers.google.com/chrome-developer-tools/docs/console

จาก Chrome 68:

ย้าย "Show timestamps" ไปที่การตั้งค่า

แสดง timestamps ช่องทำก่อนหน้านี้ในการตั้งค่าคอนโซลคอนโซลการตั้งค่าได้ย้ายไปตั้งค่า

ลองสิ่งนี้ด้วย:

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

ฟังก์ชั่นนี้ทำให้การประทับเวลาชื่อไฟล์และหมายเลขบรรทัดเป็นของใน console.logตัว

หากคุณต้องการที่จะรักษาข้อมูลหมายเลขบรรทัด (แต่ละข้อความที่ชี้ไปของ .log โทร () ไม่ได้ชี้ไปยังกระดาษห่อของเรา) .bind()คุณต้องใช้ คุณสามารถเพิ่มอาร์กิวเมนต์การประทับเวลาพิเศษผ่านได้console.log.bind(console, <timestamp>)แต่ปัญหาคือคุณต้องเรียกใช้งานใหม่ทุกครั้งเพื่อรับฟังก์ชั่นที่ถูกผูกไว้กับการประทับเวลาใหม่ วิธีที่น่าอึดอัดใจในการทำเช่นนั้นคือฟังก์ชั่นที่คืนค่าฟังก์ชันที่ถูกผูกไว้:

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

ซึ่งจะต้องใช้กับการโทรซ้ำ:

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

แต่เราสามารถทำการโทรครั้งแรกโดยการติดตั้งคุณสมบัติที่มีฟังก์ชั่น getter:

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

ตอนนี้คุณเพียงแค่โทรconsole.log(...)และโดยอัตโนมัติมันจะเป็นการเพิ่มการประทับเวลา!

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

คุณยังสามารถบรรลุพฤติกรรมนี้มีมนต์ขลังกับง่ายlog()แทนโดยการทำconsole.log()Object.defineProperty(window, "log", ...)

ดูhttps://github.com/pimterry/loglevelสำหรับชุดหุ้มคอนโซลที่ปลอดภัยที่ใช้.bind()งานได้ดี

ดูhttps://github.com/eligrey/Xccessorsเพื่อดูความเข้ากันได้ของข้อผิดพลาดตั้งแต่defineProperty()ถึงดั้งเดิม__defineGetter__API หากคุณสมบัติ API ไม่ทำงานคุณควรเลือกฟังก์ชัน wrapper ที่ได้รับการประทับเวลาใหม่ทุกครั้ง (ในกรณีนี้คุณสูญเสียข้อมูลหมายเลขบรรทัด แต่การประทับเวลาจะยังคงแสดงอยู่)

Boilerplate: การจัดรูปแบบเวลาตามที่ฉันชอบ:

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

นี่เป็นการเพิ่มฟังก์ชั่น "บันทึก" ลงในขอบเขตท้องถิ่น (โดยใช้this) โดยใช้อาร์กิวเมนต์มากเท่าที่คุณต้องการ:

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

ดังนั้นคุณสามารถใช้มัน:

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

แสดงผลแบบนี้:

[จันทร์, 11 มีนาคม 2556 16:47:49 GMT] วัตถุ {ทดสอบ: "บันทึก"} ลิง 42

ขยายโซลูชันที่ดีมาก"ด้วยสตริงรูปแบบ"จาก JSmythไปยังสนับสนุน

• ทั้งหมดอื่น ๆconsole.logรูปแบบ ( log, debug, info, warn,error )
• รวมถึงพารามิเตอร์ความยืดหยุ่นสตริงเวลาประทับ (เช่น09:05:11.518vs. 2018-06-13T09:05:11.518Z)
• รวมถึงทางเลือกในกรณีที่consoleฟังก์ชั่นหรือไม่ได้อยู่ในเบราว์เซอร์

.

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'

ฉันมีสิ่งนี้ในแอพ Node.JS ส่วนใหญ่ มันยังทำงานได้ในเบราว์เซอร์

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

โซลูชัน ES6:

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

โดยที่timestamp()ส่งคืนการประทับเวลาที่จัดรูปแบบจริงและlogเพิ่มการประทับเวลาและเผยแพร่อาร์กิวเมนต์ของตัวเองทั้งหมดconsole.log

การปรับแต่งคำตอบโดย 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);
    }
};

นี้:

• แสดงการประทับเวลาด้วยมิลลิวินาที
• ถือว่าสตริงรูปแบบเป็นพารามิเตอร์แรกที่ .log