Chrome에서 console.log 타임 스탬프?

Chrome이 console.log쓰기와 같이 타임 스탬프를 Firefox 로 출력하도록하는 빠른 방법이 있습니까? 아니면 new Date().getTime()유일한 옵션을 추가 합니까?

Chrome에는 '필요한 타임 스탬프 표시'라는 콘솔 설정 (개발자 도구-> 콘솔-> 설정 [오른쪽 위 모서리]) 옵션이 있습니다.

방금 찾았어요 자리 표시자를 파괴하고 메시지가 기록 된 코드에서 자리를 지우는 더티 해킹이 필요하지 않습니다.

Chrome 68 이상 업데이트

"타임 스탬프 표시"설정이 DevTools 드로어의 오른쪽 상단 모서리에있는 "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여기서는 완벽하지 않습니다. 왜냐하면 일련의 객체가 아닌 일련의 객체로 기록되기 때문입니다.

개발 도구 프로파일 러를 사용할 수 있습니다.

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

"타이머 이름"은 같아야합니다. 이름이 다른 여러 타이머 인스턴스를 사용할 수 있습니다.

필자는 원래 이것을 주석으로 추가했지만 적어도 한 사람이 옵션을 찾을 수 없어 (또는 어떤 이유로 특정 버전에서는 사용할 수 없었기 때문에) 스크린 샷을 추가하려고했습니다.

Chrome 68.0.3440.106 (및 이제 72.0.3626.121에서 체크인 됨)에서

• 개발 도구 (F12)
• 오른쪽 상단의 3 점 메뉴를 클릭하십시오
• 클릭 설정
• 왼쪽 메뉴에서 기본 설정을 선택하십시오
• 설정 화면의 콘솔 섹션에서 타임 스탬프 표시를 확인하십시오.

I 변환 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()타임 스탬프를 얻을 수있는 다른 방법이 있습니다

Chrome 브라우저를 사용하는 경우 크롬 콘솔 API를 사용할 수 있습니다.

• console.time : 타이머를 시작하려는 코드의 지점에서 호출하십시오.
• console.timeEnd : 타이머를 중지하려면 호출하십시오.

이 두 통화 사이의 경과 시간이 콘솔에 표시됩니다.

자세한 내용은 다음 문서 링크를 참조하십시오. https://developers.google.com/chrome-developer-tools/docs/console

Chrome 68에서 :

"타임 스탬프 표시"가 설정으로 이동

쇼 타임 스탬프로 이동 한 콘솔 설정 콘솔 설정 이전에 체크 박스 설정 .

이것을 시도하십시오 :

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() .

레거시 API 로의 호환성 폴백 은 https://github.com/eligrey/Xccessors 를 참조 하십시오 . 속성 API가 작동하지 않으면 매번 새로운 타임 스탬프를 얻는 래퍼 함수로 폴백해야합니다. 이 경우 줄 번호 정보가 손실되지만 타임 스탬프는 계속 표시됩니다.defineProperty()__defineGetter__

보일러 플레이트 : 내가 좋아하는 방식으로 시간 형식화 :

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원하는만큼 많은 인수를 사용 하여 로컬 범위에 "log"함수를 추가합니다 (을 사용 ).

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

다음과 같이 출력합니다 :

[2013 년 3 월 11 일 월요일 16:47:49 GMT] 개체 {test : "log"} monkey 42

아주 좋은 확장 솔루션 "형식 문자열" JSmyth에서를 도에 지원

• 다른 모든 console.log변화 ( log, debug, info, warn,error )
• 를 포함하여 타임 스탬프 문자열 유연성 PARAM을 (예 : 09:05:11.518대 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