Dấu thời gian console.log trong Chrome?

Có cách nào nhanh chóng để Chrome đưa ra dấu thời gian trong console.logghi (như Firefox không). Hoặc là chuẩn bị trước new Date().getTime()lựa chọn duy nhất?

Trong Chrome, có tùy chọn là Cài đặt bảng điều khiển (Công cụ dành cho nhà phát triển -> Bảng điều khiển -> Cài đặt [góc trên bên phải]) có tên "Hiển thị dấu thời gian" chính xác là những gì tôi cần.

Tôi vừa tìm thấy nó. Không có các bản hack bẩn khác cần thiết để phá hủy các trình giữ chỗ và xóa vị trí trong mã nơi các thông điệp được ghi lại.

Cập nhật cho Chrome 68+

Cài đặt "Hiển thị dấu thời gian" đã được chuyển đến ngăn Tùy chọn của "Cài đặt DevTools", được tìm thấy ở góc trên bên phải của ngăn kéo DevTools:

Thử cái này:

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

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

Hoặc điều này, trong trường hợp bạn muốn có dấu thời gian:

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

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

Để đăng nhập nhiều hơn một thứ và theo cách tốt đẹp (như biểu diễn cây đối tượng):

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

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

Với chuỗi định dạng ( 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);
        }
    }
};

Đầu ra với điều đó:

PS: Chỉ được thử nghiệm trong Chrome.

PPS: Array.prototype.slicekhông hoàn hảo ở đây vì nó sẽ được ghi lại dưới dạng một mảng các đối tượng chứ không phải là một loạt các đối tượng.

Bạn có thể sử dụng công cụ dev profiler.

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

"Tên hẹn giờ" phải giống nhau. Bạn có thể sử dụng nhiều phiên bản của bộ đếm thời gian với các tên khác nhau.

Ban đầu tôi đã thêm nhận xét này dưới dạng nhận xét, nhưng tôi muốn thêm ảnh chụp màn hình vì ít nhất một người không thể tìm thấy tùy chọn (hoặc có thể nó không có sẵn trong phiên bản cụ thể của họ vì một số lý do).

Trên Chrome 68.0.3440.106 (và hiện đã được kiểm tra trong 72.0.3626.121) tôi đã phải

• mở công cụ dev (F12)
• nhấp vào menu ba chấm ở trên cùng bên phải
• nhấp vào cài đặt
• chọn tùy chọn trong menu bên trái
• kiểm tra hiển thị dấu thời gian trong phần Bảng điều khiển của màn hình cài đặt

Tôi chuyển đổi argumentssang Array bằng cách sử dụng Array.prototype.sliceđể tôi có thể concatvới một Array khác về những gì tôi muốn thêm, sau đó chuyển nó vào 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"]

Có vẻ như nó argumentscũng có thể được Array.prototype.unshiftchỉnh sửa, nhưng tôi không biết nếu sửa đổi nó như thế này là một ý tưởng tốt / sẽ có tác dụng phụ khác

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 Datevà Date.now()là những cách khác để có dấu thời gian

Nếu bạn đang sử dụng trình duyệt Google Chrome, bạn có thể sử dụng api bảng điều khiển chrome:

• console.time: gọi nó tại điểm trong mã của bạn, nơi bạn muốn bắt đầu bộ đếm thời gian
• console.timeEnd: gọi nó để dừng bộ hẹn giờ

Thời gian trôi qua giữa hai cuộc gọi này được hiển thị trong bảng điều khiển.

Để biết thông tin chi tiết, vui lòng xem liên kết tài liệu: https://developers.google.com/chrome-developer-tools/docs/console

Từ Chrome 68:

"Hiển thị dấu thời gian" được chuyển đến cài đặt

Hộp kiểm Hiển thị dấu thời gian trước đó trong Cài đặt bảng điều khiển Cài đặt bảng điều khiển đã được chuyển sang Cài đặt .

Cũng thử điều này:

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

Hàm này đặt dấu thời gian, tên tệp và số dòng giống như của tích hợp console.log.

Nếu bạn muốn lưu giữ thông tin số dòng (mỗi thông báo trỏ đến cuộc gọi .log () của nó, không phải tất cả đều trỏ đến trình bao bọc của chúng tôi), bạn phải sử dụng .bind(). Bạn có thể thêm vào một đối số dấu thời gian bổ sung thông qua console.log.bind(console, <timestamp>)nhưng vấn đề là bạn cần chạy lại điều này mỗi lần để có được một hàm bị ràng buộc với dấu thời gian mới. Một cách khó xử để làm điều đó là một hàm trả về một hàm bị ràng buộc:

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

mà sau đó phải được sử dụng với một cuộc gọi kép:

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

NHƯNG chúng ta có thể thực hiện cuộc gọi đầu tiên ẩn bằng cách cài đặt một thuộc tính với chức năng getter:

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

Bây giờ bạn chỉ cần gọi console.log(...)và tự động nó sẽ chuẩn bị dấu thời gian!

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

Bạn thậm chí có thể đạt được hành vi kỳ diệu này với một cách đơn giản log()thay vì console.log()làm Object.defineProperty(window, "log", ...).

Xem https://github.com/pimterry/loglevel để biết trình bao bọc bảng điều khiển an toàn được thực hiện tốt bằng cách sử dụng .bind(), với các dự phòng tương thích.

Xem https://github.com/eligrey/Xccessors để biết các dự phòng tương thích từ API defineProperty()kế thừa __defineGetter__. Nếu không có API thuộc tính nào hoạt động, bạn nên chuyển sang chức năng trình bao bọc có dấu thời gian mới mỗi lần. (Trong trường hợp này, bạn mất thông tin số dòng, nhưng dấu thời gian vẫn sẽ hiển thị.)

Nồi hơi: Định dạng thời gian theo cách tôi thích:

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

Điều này thêm chức năng "log" vào phạm vi cục bộ (sử dụng this) bằng cách sử dụng nhiều đối số như bạn muốn:

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

Vì vậy, bạn có thể sử dụng nó:

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

Xuất ra một cái gì đó như thế này:

[Thứ Hai, ngày 11 tháng 3 năm 2013 16:47:49 GMT] Đối tượng {test: "log"} khỉ 42

đã mở rộng giải pháp rất hay "với chuỗi định dạng" từ JSmyth để hỗ trợ

• tất cả các khác console.logbiến thể ( log, debug, info, warn, error)
• bao gồm thông số linh hoạt chuỗi dấu thời gian (ví dụ 09:05:11.518so với 2018-06-13T09:05:11.518Z)
• bao gồm dự phòng trong trường hợp consolehoặc các chức năng của nó không tồn tại trong trình duyệt

.

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'

Tôi có điều này trong hầu hết các ứng dụng Node.JS. Nó cũng hoạt động trong trình duyệt.

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

Giải pháp ES6:

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

nơi timestamp()trả về thực sự được định dạng dấu thời gian và logthêm dấu thời gian và truyền tất cả các đối số của riêng mình vàoconsole.log

Một sàng lọc về câu trả lời của 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);
    }
};

Điều này:

• hiển thị dấu thời gian với mili giây
• giả sử một chuỗi định dạng là tham số đầu tiên để .log