JavaScript
कंसोल

परिचय

वाक्य - विन्यास

• void कंसोल.log (obj1 [, obj2, ..., objN]);
• शून्य कंसोल.लॉग (संदेश [, सब 1, ..., सबएन]);

पैरामीटर

टिप्पणियों

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

if (!window.console)
{ 
    console = {log: function() {}}; 
}

टेबुलेटिंग वैल्यू - कंसोल.टेबल ()

अधिकांश वातावरणों में, सारणीबद्ध सारणी में ऑब्जेक्ट और सरणियों को प्रदर्शित करने के लिए console.table() का उपयोग किया जा सकता है।

उदाहरण के लिए:

console.table(['Hello', 'world']);

इस तरह प्रदर्शित करता है:

console.table({foo: 'bar', bar: 'baz'});

इस तरह प्रदर्शित करता है:

var personArr = [{"personId": 123, "name": "Jhon", "city": "Melbourne", "phoneNo": "1234567890"}, {"personId": 124, "name": "Amelia" , "शहर": "सिडनी", "फोननो": "1234567890"}, {"personId": 125, "नाम": "एमिली", "शहर": "पर्थ", "फोननो": "1234567890"},} {"personId": 126, "name": "अब्राहम", "शहर": "पर्थ", "phoneNo": "1234567890"}];

कंसोल.टेबल (personArr, ['name', 'personId']);

प्रदर्शित करता है:

लॉग करते समय एक स्टैक ट्रेस सहित - कंसोल.ट्रेस ()

function foo() {
  console.trace('My log statement');
}

foo();

कंसोल में यह प्रदर्शित करेगा:

My log statement       VM696:1
  foo                  @ VM696:1
  (anonymous function) @ (program):1

नोट: जहां उपलब्ध है यह जानना भी उपयोगी है कि वही स्टैक ट्रेस त्रुटि ऑब्जेक्ट की संपत्ति के रूप में सुलभ है। यह पोस्ट-प्रोसेसिंग और स्वचालित फीडबैक एकत्र करने के लिए उपयोगी हो सकता है।

var e = new Error('foo');
console.log(e.stack);

ब्राउज़र के डिबगिंग कंसोल पर मुद्रण

सरल संदेशों को प्रिंट करने के लिए ब्राउज़र के डिबगिंग कंसोल का उपयोग किया जा सकता है। इस डिबगिंग या वेब कंसोल को सीधे ब्राउज़र में खोला जा सकता है (अधिकांश ब्राउज़रों में F12 कुंजी - आगे की जानकारी के लिए नीचे दिए गए रिमार्क्स देखें) और console की log विधि जावास्क्रिप्ट ऑब्जेक्ट को निम्न टाइप करके आमंत्रित किया जा सकता है:

console.log('My message');

फिर, Enter दबाकर, यह डिबगिंग कंसोल में My message प्रदर्शित करेगा।

console.log() को वर्तमान दायरे में उपलब्ध किसी भी तर्क और चर के साथ बुलाया जा सकता है। उनके बीच एक छोटी सी जगह के साथ एकाधिक तर्क एक पंक्ति में मुद्रित किए जाएंगे।

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

log विधि डीबगिंग कंसोल में निम्न प्रदर्शित करेगा:

['string']  1  Object { test: 1 }  Window { /* truncated */ }

सादे तार के पास, console.log() सरणियों, वस्तुओं, तिथियों, कार्यों, आदि जैसे अन्य प्रकारों को संभाल सकते हैं।

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

प्रदर्शित करता है:

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

नेस्टेड ऑब्जेक्ट्स ढह सकते हैं:

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

प्रदर्शित करता है:

Object { key1: 'val', key2: Array[2], key3: Object }

कुछ प्रकार जैसे Date ऑब्जेक्ट और function s को अलग-अलग तरीके से प्रदर्शित किया जा सकता है:

console.log(new Date(0));
console.log(function test(a, b) { return c; });

प्रदर्शित करता है:

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

अन्य प्रिंट विधियाँ

log विधि के अलावा, आधुनिक ब्राउज़र भी इसी तरह के तरीकों का समर्थन करते हैं:

• console.info - छोटा सूचनात्मक आइकन (ⓘ) मुद्रित स्ट्रिंग (एस) या ऑब्जेक्ट (एस) के बाईं ओर दिखाई देता है।

• console.warn - बाईं ओर छोटा चेतावनी आइकन (!) दिखाई देता है। कुछ ब्राउज़रों में, लॉग की पृष्ठभूमि पीली है।

• console.error - छोटे बार आइकन (⊗) बाईं ओर दिखाई देता है। कुछ ब्राउज़रों में, लॉग की पृष्ठभूमि लाल है।

• console.timeStamp - वर्तमान समय और एक निर्दिष्ट स्ट्रिंग को आउटपुट करता है, लेकिन गैर-मानक है:

  console.timeStamp('msg');
  

  प्रदर्शित करता है:

  00:00:00.001 msg
  

• console.trace - वर्तमान स्टैक ट्रेस को आउटपुट करता है या यदि वैश्विक स्कोप में इनवॉइस किया जाता है तो log विधि के समान आउटपुट प्रदर्शित करता है।

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  प्रदर्शित करता है:

  first
  sec
  (anonymous function)
  

उपरोक्त छवि क्रोम संस्करण 56 में timeStamp के अपवाद के साथ सभी कार्यों को दिखाती है।

ये विधियां log विधि के समान व्यवहार करती हैं और अलग-अलग डिबगिंग कंसोल में विभिन्न रंगों या प्रारूपों में प्रस्तुत कर सकती हैं।

कुछ डीबगर्स में, मुद्रित ऑब्जेक्ट या छोटे त्रिकोण (►) पर क्लिक करके संबंधित ऑब्जेक्ट जानकारी को और विस्तारित किया जा सकता है जो संबंधित ऑब्जेक्ट गुणों को संदर्भित करता है। ये टकराने वाली वस्तु गुण लॉग पर खुले या बंद हो सकते हैं। इस पर अतिरिक्त जानकारी के लिए console.dir . console.dir देखें

मापने का समय - कंसोल.टाइम ()

console.time() का उपयोग यह मापने के लिए किया जा सकता है कि आपके कोड में किसी कार्य को चलाने में कितना समय लगता है।

console.time([label]) कॉल करने से एक नया टाइमर शुरू होता है। जब console.timeEnd([label]) कहा जाता है, तो बीता हुआ समय, मिलीसेकंड में, मूल .time() कॉल की गणना और लॉग होने के बाद से होता है। इस व्यवहार के कारण, आप .timeEnd() को एक ही लेबल के साथ कई बार मूल .time() कॉल किए जाने के बाद बीता हुआ समय लॉग करने के लिए कह सकते हैं।

उदाहरण 1:

console.time('response in');

alert('Click to continue');
console.timeEnd('response in');

alert('One more time');
console.timeEnd('response in');

उत्पादन होगा:

response in: 774.967ms
response in: 1402.199ms

उदाहरण 2:

var elms = document.getElementsByTagName('*'); //select all elements on the page

console.time('Loop time');

for (var i = 0; i < 5000; i++) {
    for (var j = 0, length = elms.length; j < length; j++) {
        // nothing to do ...
    }
}

console.timeEnd('Loop time');

उत्पादन होगा:

Loop time: 40.716ms

काउंटिंग - कंसोल.काउंट ()

console.count([obj]) तर्क के रूप में प्रदान की गई वस्तु के मूल्य पर एक काउंटर रखता है। हर बार जब यह विधि लागू की जाती है, तो काउंटर बढ़ाया जाता है (खाली स्ट्रिंग '' के अपवाद के साथ)। एक संख्या के साथ एक लेबल डिबगिंग कंसोल में निम्न प्रारूप के अनुसार प्रदर्शित होता है:

[label]: X

label तर्क के रूप में पारित वस्तु के मूल्य का प्रतिनिधित्व करता है और X काउंटर के मूल्य का प्रतिनिधित्व करता है।

एक वस्तु का मूल्य हमेशा माना जाता है, भले ही चर को तर्क के रूप में प्रदान किया जाए:

var o1 = 1, o2 = '2', o3 = "";
console.count(o1);
console.count(o2);
console.count(o3);

console.count(1);
console.count('2');
console.count('');

प्रदर्शित करता है:

1: 1
2: 1
: 1
1: 2
2: 2
: 1

संख्याओं के साथ तार Number वस्तुओं में बदल जाते हैं:

console.count(42.3);
console.count(Number('42.3'));
console.count('42.3');

प्रदर्शित करता है:

42.3: 1
42.3: 2
42.3: 3

फ़ंक्शंस हमेशा वैश्विक Function ऑब्जेक्ट पर इंगित करते हैं:

console.count(console.constructor);
console.count(function(){});
console.count(Object);
var fn1 = function myfn(){};
console.count(fn1);
console.count(Number);

प्रदर्शित करता है:

[object Function]: 1
[object Function]: 2
[object Function]: 3
[object Function]: 4
[object Function]: 5

कुछ वस्तुओं को विशिष्ट काउंटर मिलते हैं जो उनके द्वारा संदर्भित वस्तु के प्रकार से संबंधित हैं:

console.count(undefined);
console.count(document.Batman);
var obj;
console.count(obj);
console.count(Number(undefined));
console.count(NaN);
console.count(NaN+3);
console.count(1/0);
console.count(String(1/0));
console.count(window);
console.count(document);
console.count(console);
console.count(console.__proto__);
console.count(console.constructor.prototype);
console.count(console.__proto__.constructor.prototype);
console.count(Object.getPrototypeOf(console));
console.count(null);

प्रदर्शित करता है:

undefined: 1
undefined: 2
undefined: 3
NaN: 1
NaN: 2
NaN: 3
Infinity: 1
Infinity: 2
[object Window]: 1
[object HTMLDocument]: 1
[object Object]: 1
[object Object]: 2
[object Object]: 3
[object Object]: 4
[object Object]: 5
null: 1

रिक्त स्ट्रिंग या तर्क की अनुपस्थिति

यदि डिबगिंग कंसोल में क्रमिक विधि से इनपुट करते समय कोई तर्क नहीं दिया जाता है , तो एक खाली स्ट्रिंग को पैरामीटर के रूप में ग्रहण किया जाता है, अर्थात:

> console.count();
  : 1
> console.count('');
  : 2
> console.count("");
  : 3

मुखरता के साथ डिबगिंग - कंसोल.स्सर्ट ()

यदि दावा false है तो कंसोल को त्रुटि संदेश लिखता है। अन्यथा, यदि दावा true , तो यह कुछ नहीं करता है।

console.assert('one' === 1);

दावे के बाद कई तर्क दिए जा सकते हैं - ये तार या अन्य वस्तुएं हो सकते हैं - जो केवल तभी मुद्रित होंगे जब अभिकथन false :

console.assert एक AssertionError ( Node.js को छोड़कर) नहीं फेंकता है, जिसका अर्थ है कि यह विधि अधिकांश परीक्षण रूपरेखाओं के साथ असंगत है और कोड निष्पादन एक असफल दावे पर नहीं टूटेगा।

कंसोल आउटपुट को स्वरूपित करना

कंसोल के कई प्रिंट तरीके भी % टोकन का उपयोग करके, सी-जैसे स्ट्रिंग प्रारूपण को संभाल सकते हैं:

console.log('%s has %d points', 'Sam', 100);

प्रदर्शित करता है Sam has 100 points ।

जावास्क्रिप्ट में प्रारूप विनिर्देशकों की पूरी सूची है:

उन्नत स्टाइल

जब सीएसएस प्रारूप विनिर्देशक ( %c ) को स्ट्रिंग के बाईं ओर रखा जाता है, तो प्रिंट विधि CSS नियमों के साथ एक दूसरे पैरामीटर को स्वीकार करेगा जो उस स्ट्रिंग के प्रारूपण पर ठीक-ठीक नियंत्रण की अनुमति देता है:

console.log('%cHello world!', 'color: blue; font-size: xx-large');

प्रदर्शित करता है:

कई %c प्रारूप विनिर्देशक का उपयोग करना संभव है:

• %c के दाईं ओर किसी भी विकल्प का प्रिंट विधि में एक समान पैरामीटर है;
• यह पैरामीटर एक एमटी-स्ट्रिंग हो सकता है, अगर उसी प्रतिस्थापन के लिए सीएसएस नियम लागू करने की कोई आवश्यकता नहीं है;
• यदि दो %c प्रारूप विनिर्देशक पाए जाते हैं, तो 1 ^सेंट ( %c में संलग्न) और 2 ^nd सबस्ट्रिंग में उनके नियम क्रमशः मुद्रण विधि के 2 ^nd और 3 ^rd पैरामीटर में परिभाषित होंगे।
• यदि तीन %c प्रारूप विनिर्देशक पाए जाते हैं, तो 1 ^सेंट , 2 ^nd और 3 ^rd सबस्ट्रिंग के उनके नियम क्रमशः 2 ^nd , 3 ^rd और 4 ^वें पैरामीटर में परिभाषित होंगे, और इसी तरह ...

console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

प्रदर्शित करता है:

उत्पादन इंडेंट करने के लिए समूहों का उपयोग करना

निम्न तरीकों से डिबगिंग कंसोल में एक संकुचित समूह में आउटपुट को पहचाना और संलग्न किया जा सकता है:

• console.groupCollapsed() : इस विधि के लागू होने के बाद की गई सभी प्रविष्टियों को प्रकट करने के लिए प्रकटीकरण बटन के माध्यम से विस्तारित की जा सकने वाली प्रविष्टियों का एक ढह गया समूह बनाता है;
• console.group() : प्रविष्टियों का एक विस्तारित समूह बनाता है, जो इस पद्धति के लागू होने के बाद प्रविष्टियों को छिपाने के लिए ढह सकता है।

निम्नलिखित विधियों का उपयोग करके पहचान को पीछे की प्रविष्टियों के लिए हटाया जा सकता है:

• कंसोल .groupEnd () : वर्तमान समूह से बाहर निकलता है, इस पद्धति के लागू होने के बाद मूल प्रविष्टियों में नई प्रविष्टियाँ मुद्रित करने की अनुमति देता है।

समूहों को कई पहचान आउटपुट या प्रत्येक परत के भीतर बंधी परतों की अनुमति देने के लिए कैस्केड किया जा सकता है:

= Collapsed group expanded =>

कंसोल साफ़ करना - कंसोल.क्लियर ()

आप कंसोल विंडो का उपयोग करके कंसोल को साफ कर सकते हैं। क्लियर console.clear() विधि। यह कंसोल में पहले से मुद्रित सभी संदेशों को निकालता है और कुछ वातावरणों में "कंसोल को साफ़ किया गया" जैसे संदेश को प्रिंट कर सकता है।

वस्तुओं को प्रदर्शित करना और XML को अंतःक्रियात्मक रूप से सांत्वना देना।

console.dir(object) निर्दिष्ट जावास्क्रिप्ट ऑब्जेक्ट के गुणों की एक इंटरैक्टिव सूची प्रदर्शित करता है। आउटपुट प्रकटीकरण त्रिकोण के साथ एक श्रेणीबद्ध सूची के रूप में प्रस्तुत किया गया है जो आपको बाल वस्तुओं की सामग्री को देखने देता है।

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dir(myObject);

प्रदर्शित करता है:

console.dirxml(object) यदि संभव हो तो ऑब्जेक्ट के वंशज तत्वों के एक XML प्रतिनिधित्व को प्रिंट करता है, या यदि नहीं तो जावास्क्रिप्ट प्रतिनिधित्व करता है। कॉलिंग console.dirxml() HTML और XML तत्वों पर फोन कर के बराबर है console.log() ।

उदाहरण 1:

console.dirxml(document)

प्रदर्शित करता है:

उदाहरण 2:

console.log(document)

प्रदर्शित करता है:

उदाहरण 3:

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dirxml(myObject);

प्रदर्शित करता है: