Chrome में कंसोल.लॉग टाइमस्टैम्प?


235

क्या राइट में टाइमस्टैम्प को आउटपुट करने के लिए क्रोम प्राप्त करने का कोई त्वरित तरीका है console.log(जैसे फ़ायरफ़ॉक्स करता है)। या new Date().getTime()फिर एकमात्र विकल्प प्रस्तुत कर रहा है?


1
क्या आप स्वीकार किए गए उत्तर को बदल सकते हैं? दूसरा सबसे ज्यादा वोट किया गया व्यक्ति बहुत सरल है।
लिरोन याहदव

ऐसा लगता है कि Chrome ने इसे बदल दिया है। देखें, github.com/Microsoft/vscode/issues/61298#issuecomment-431422747
itsthetaste

जवाबों:


425

क्रोम में, कंसोल सेटिंग्स (डेवलपर टूल -> कंसोल -> सेटिंग्स [अपर-राइट कॉर्नर]) का नाम "शो टाइमस्टैम्प" है, जो वास्तव में मेरी जरूरत है।

मैंने अभी पाया है। किसी भी अन्य गंदे हैक की आवश्यकता नहीं थी जो प्लेसहोल्डर को नष्ट कर देता है और उस कोड को मिटा देता है जहां से संदेश लॉग किया गया था।

Chrome 68+ के लिए अपडेट करें

"शो टाइमस्टैम्प" सेटिंग को "DevTools settings" के प्रेफ़रेंस फलक में ले जाया गया है, जो DevTools दराज के ऊपरी-दाएँ कोने में पाया गया है:

यहां छवि विवरण दर्ज करें


3
जैसा कि @Krzysztof Wolny ने बताया, यह अब क्रोम 35 DevTools में बनाया गया है। (Yay!) डेवलपर टूल (जैसे F12 या "इंसिस्टेंट तत्व") खोलकर सक्षम करें, सेटिंग्स देखने के लिए "गियर" पर क्लिक करें, फिर "कंसोल" सेक्शन में "शो टाइमस्टैम्प" चेकबॉक्स देखें। ! Devtools में टाइमस्टैम्प सेटिंग को सक्षम करें twitter.com/addyosmani#stream-item-tweet-485862365247053824 html5rocks.com/en/tutorials/developertools/chrome-35/… codereview.chromium.org/185713007
iX3

1
क्या क्रोम में टाइमस्टैम्प के लिए एक पैटर्न का उपयोग करने का एक तरीका है? मुझे केवल घंटे और मिनट चाहिए।
गुस

31
Chrome 68.0.3440.106 पर मुझे dev टूल्स (F12) को खोलना था> ऊपरी दाएं में तीन-डॉट मेनू पर क्लिक करें> सेटिंग्स पर क्लिक करें> बाएं मेनू में प्राथमिकताएं> सेटिंग्स स्क्रीन के कंसोल सेक्शन में शो टाइमस्टैम्प्स (शीर्ष दाएं) पर क्लिक करें )
टेकीगर्ल ४'१girl को

5
70.0.3538.110 (आधिकारिक बिल्ड) (64-बिट) इस उत्तर ने एक बार मेरे लिए काम किया: कंसोल "गियर आइकन"; "शो टाइमस्टैम्प्स" चेकमार्क ... लेकिन अब मुझे क्रोम 70.0.3538.110 (आधिकारिक बिल्ड) (64-बिट) में "शो टाइमस्टैम्प्स" दिखाई नहीं दे रहे हैं, इसलिए मैंने @ tekiegirl के सुझाव को फिर से आज़माया: Chrome 68: अर्थात खुले देव उपकरण (F12) )> ऊपरी दाएं में तीन-डॉट मेनू पर क्लिक करें> सेटिंग्स पर क्लिक करें> बाएं मेनू में प्राथमिकताएं चुनें> शो टाइमस्टैम्प की जांच करें ... लेकिन मुझे सेटिंग्स के बाएं मेनू में "प्राथमिकताएं" नहीं दिखाई देती हैं 70.0.3538.110 (आधिकारिक बिल्ड ) (64-बिट)
लाल मटर

2
धन्यवाद @tekiegirl, सहमत हूँ, आपका जवाब मेरी समस्या हल करता है! यही है, Chrome 68+ के उपयोगकर्ताओं को DevTools सेटिंग्स ( त्वरित कंसोल सेटिंग्स के लिए दराज ) को बदलना होगा । DevTools सेटिंग्स में, "प्राथमिकताएं" टैब, "कंसोल" हेडर; youwill "टाइमस्टैम्प दिखाएं" चेकबॉक्स खोजें।
लाल मटर

81

इसे इस्तेमाल करे:

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


उस के साथ आउटपुट:

नमूना उत्पादन

पुनश्च: केवल क्रोम में परीक्षण किया गया।

पी पी एस: Array.prototype.slice लिए बिल्कुल सही नहीं है, क्योंकि यह उन वस्तुओं की एक सरणी के रूप में लॉग इन किया जाएगा, जिनकी श्रृंखला नहीं है।


क्रोम के कंसोल में वस्तुओं को एक सुंदर तरीके से प्रदर्शित करने के लिए लॉग स्टेटमेंट को फिर से लिखा गया था, पिछला संस्करण केवल "[ऑब्जेक्ट ऑब्जेक्ट]" या इस प्रकार का दिखा रहा था।
जेस्मिथ

@ नील, निश्चित रूप से यह नहीं है - आपको इसे आगे बढ़ाना होगा (; आप कुछ इस
जेस्मिथ

यह सामान्य स्थिति में काम नहीं करेगा जहां लॉग करने के लिए पहला तर्क एक प्रारूप स्ट्रिंग है
ब्लूफ़ास्ट

@ आंगनवाल ने मेरी टिप्पणी को हटा दिया क्योंकि यह वास्तव में समझ में नहीं आया - खून में कॉफी की कमी। आप सही हैं, यह नमूना कोड प्रारूप निर्दिष्टकर्ताओं को ग्रहण नहीं करता है। मुझे लगता है, हम यहां एक अंग पर जा सकते हैं और प्रारूप स्ट्रिंग विनिर्देशक के लिए जांच कर सकते हैं, जो विभिन्न आउटपुट का उत्पादन करते हैं।
JSmyth

किसी भी तरह से newlines संभाल करने के लिए कोई रास्ता नहीं है ? एक मल्टी-लाइन संदेश क्रोम द्वारा कई लाइनों पर प्रदर्शित किया जाता है, लेकिन जब एक स्ट्रिंग में, यह line वर्ण के साथ एक लंबी रेखा बन जाता है।
Dan Dascalescu

20

आप देव टूल्स प्रोफाइलर का उपयोग कर सकते हैं।

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

"टाइमर नाम" समान होना चाहिए। आप विभिन्न नामों के साथ टाइमर के कई उदाहरणों का उपयोग कर सकते हैं।


वहाँ भी console.timeStamp('foo')यह सिर्फ समय में एक पीले बिंदु के रूप में प्रकट होता है। यह मेरे लिए काम नहीं किया जब रिक्त स्थान के साथ नाम का उपयोग कर रहा है।
22

यह console.logया उससे संबंधित प्रश्न का उत्तर नहीं देता है
एंड्रियास डिट्रिच

@AndreasDietrich क्यों नहीं? यह कंसोल को आउटपुट देता है। इसके बारे में और अधिक इस 2013 blogpost blog.mariusschulz.com/2013/11/22/… पर
JP Hellemons

18

मैंने मूल रूप से इसे एक टिप्पणी के रूप में जोड़ा था, लेकिन मैं एक स्क्रीनशॉट जोड़ना चाहता था क्योंकि कम से कम एक व्यक्ति को विकल्प नहीं मिल सकता था (या शायद यह किसी कारण से उनके विशेष संस्करण में उपलब्ध नहीं था)।

Chrome 68.0.3440.106 पर (और अब 72.0.3626.121 में जाँच की गई) मुझे करना था

  • खुले देव उपकरण (F12)
  • ऊपर दाईं ओर दिए गए तीन-डॉट मेनू पर क्लिक करें
  • सेटिंग्स पर क्लिक करें
  • बाएं मेनू में प्राथमिकताएं चुनें
  • सेटिंग्स स्क्रीन के कंसोल सेक्शन में शो टाइमस्टैम्प की जाँच करें

सेटिंग्स> प्राथमिकताएं> कंसोल> टाइमस्टैम्प दिखाएं


7

मैं कन्वर्ट 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"]

6

+new Dateऔर Date.now()वैकल्पिक तरीके हैं टाइमस्टैम्प प्राप्त करने के लिए


धन्यवाद, +1, लेकिन मैं उम्मीद कर रहा था कि कोड जोड़ने के लिए इसके लिए कुछ समर्थन हो सकता है।
UpTheCreek

6

यदि आप Google Chrome ब्राउज़र का उपयोग कर रहे हैं, तो आप क्रोम कंसोल एपीआई का उपयोग कर सकते हैं:

  • कंसोल.टाइम: इसे अपने कोड में उस बिंदु पर कॉल करें जहां आप टाइमर शुरू करना चाहते हैं
  • कंसोल। टाइमइंड: टाइमर को रोकने के लिए इसे कॉल करें

इन दो कॉलों के बीच बीता हुआ समय कंसोल में प्रदर्शित होता है।

विस्तार से जानकारी के लिए, कृपया डॉक लिंक देखें: https://developers.google.com/chrome-developer-tools/docs/console


इस पर थोड़ा विस्तार करने के लिए उन जैसे मेरे लिए भी आलसी हो जाना और इसे देखने के लिए। सही उपयोग है: कंसोल.टाइम ("myMeasure"); [कोड जिसे आप समय देना चाहते हैं] कंसोल.टाइमईंड ("मायमर्ज़");
समीह

यह कंसोल.लॉग या लॉगिंग से संबंधित प्रश्न का उत्तर नहीं देता है
एंड्रियास डिट्रीच

6

Chrome 68 से:

"टाइमस्टैम्प दिखाएं" सेटिंग में चले गए

टाइमस्टैंप दिखाएं कंसोल सेटिंग्स कंसोल सेटिंग्स में पहले से चेकबॉक्स ले जाया गया है सेटिंग

यहां छवि विवरण दर्ज करें


2
@ tekiegirl के जवाब में स्क्रीनशॉट दिखाया गया है जहां DevTools सेटिंग्स में चेकबॉक्स ढूंढना है; इस उत्तर में स्क्रीनशॉट मुझे यह नहीं दिखाता है कि "शो टाइमस्टैम्प्स" चेकबॉक्स को कहां खोजें।
लाल मटर

4

यह भी आज़माएँ:

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

यह फ़ंक्शन टाइमस्टैम्प, फ़ाइल नाम और लाइन नंबर को बिल्ट-इन के समान रखता है console.log


Est logफ़ंक्शन ने इस तरह से एक निश्चित टाइमस्टैम्प जमा किया; जब भी आप अप-टू-डेट समय [= अप टू डेट डेट; -] चाहते हैं, तो आपको इसे हर बार फिर से चलाना होगा। इसे एक फ़ंक्शन बनाना संभव है, लेकिन आपको mklog()(...)इसके बजाय इसका उपयोग करना होगा log()
बेनी चेर्नियाव्स्की-पास्किन

3

अगर आप लाइन नंबर की जानकारी (इसके .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...")

लेकिन हम पहली कॉल को फ़ंक्शन फ़ंक्शन के साथ गुण स्थापित करके बना सकते हैं :

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__


बॉयलरप्लेट: जिस तरह से मुझे यह पसंद है, स्वरूपण:

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

2

यह स्थानीय 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 मार्च 2013 16:47:49 GMT] वस्तु {परीक्षण: "लॉग"} बंदर 42


2

JSmyth से समर्थन के लिए "प्रारूप स्ट्रिंग के साथ" बहुत अच्छा समाधान बढ़ाया

  • अन्य सभी console.logरूपों ( log, debug, info, warn, error)
  • सहित टाइमस्टैम्प स्ट्रिंग लचीलापन परम (जैसे 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'

हालांकि एक नुकसान यह है कि (जैसे एफएफ 56.0 में) यह लॉग स्टेटमेंट का स्रोत स्थान नहीं दिखाता है, लेकिन Utl.jsऊपर से एक । इसलिए Utl.consoleWithTimestamps(...)-ओवर्राइड की सक्षमता (ऑन-डिमांड कमेंटिंग) समझदारी का काम कर सकती है
एंड्रियास

1

मेरे पास अधिकांश 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);
}

1

ES6 समाधान:

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

जहां timestamp()रिटर्न वास्तव में टाइमस्टैम्प को स्वरूपित करता है और टाइमस्टैम्प logजोड़कर सभी तर्कों का प्रचार करता हैconsole.log


1
कृपया सभी के लिए यह स्पष्ट करके स्पष्ट करें कि क्या कार्य करेंगे
यतिन खुल्लर

साभार @YatinKhullar मैंने अपना जवाब बदल दिया है।
ए। रोकिंस्की

0

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

यह लगभग सभी अच्छा लग रहा है, सिवाय इसके कि यदि आप console.log(document, window), यानी प्रारूप स्ट्रिंग धारणा के बिना, तो आपको एसएमएस मिलेगा। पसंद 2014-02-15T20:02:17.284Z > [object HTMLDocument] Window {…}के बजाय documentएक विस्तार योग्य वस्तु पेड़ के रूप में प्रतिनिधित्व किया जा रहा।
जेस्मिथ

यहां देखें जहां मैंने आपके द्वारा लाए गए मुद्दे का हल खोजने की कोशिश की (समय से पहले मेरे जवाब को भी अपडेट किया)।
JSmyth

@ जेस्मिथ: निश्चित रूप से, यही कारण है कि मेरे शोधन की आवश्यकताओं में से एक यह है कि पहला तर्क एक प्रारूप स्ट्रिंग है। इसे लचीला बनाने के लिए, संभवतः एक स्ट्रिंग होने के लिए पहले तर्क की जांच पर्याप्त होगी।
ब्लूफैस्ट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.