Console Utilities API का रेफ़रंस

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Console Utilities API में, सामान्य टास्क करने के लिए काम के फ़ंक्शन का कलेक्शन शामिल है. जैसे: DOM एलिमेंट चुनना और उनकी जांच करना, ऑब्जेक्ट की क्वेरी करना, डेटा को पढ़ने लायक फ़ॉर्मैट में दिखाना, प्रोफ़ाइलर को रोकना और शुरू करना, DOM इवेंट और फ़ंक्शन कॉल की निगरानी करना वगैरह.

क्या आपको console.log(), console.error(), और console.* के बाकी फ़ंक्शन के बारे में जानना है? Console API के बारे में जानकारी देखें Console API Reference.

$_

$_ से, हाल ही में आकलन किए गए एक्सप्रेशन की वैल्यू मिलती है.

यहां दिए गए उदाहरण में, एक सामान्य एक्सप्रेशन (2 + 2) का आकलन किया गया है. इसके बाद, $_ प्रॉपर्टी का आकलन किया जाता है. इसमें वही वैल्यू होती है:

$_, हाल ही में कैलकुलेट किया गया एक्सप्रेशन है.

अगले उदाहरण में, आकलन किए गए एक्सप्रेशन में शुरुआत में नामों की एक कैटगरी शामिल होती है. कैटगरी की लंबाई जानने के लिए, $_.length का आकलन करने पर, $_ में सेव की गई वैल्यू बदलकर, हाल ही में आकलन किया गया एक्सप्रेशन, 4 हो जाती है:

नई कमांड का आकलन करने पर, $_ बदल जाता है.

$0 - $4

$0, $1, $2, $3, और $4 कमांड, Elements पैनल में जांचे गए पिछले पांच DOM एलिमेंट (इनमें ::before या ::after जैसे स्यूडो-एलिमेंट भी शामिल हैं) या Profiles पैनल में चुने गए पिछले पांच JavaScript हीप ऑब्जेक्ट के लिए, इतिहास के रेफ़रंस के तौर पर काम करते हैं. $0 से, हाल ही में चुने गए एलिमेंट या JavaScript ऑब्जेक्ट की वैल्यू मिलती है. वहीं, $1 से दूसरे नंबर पर हाल ही में चुने गए एलिमेंट या JavaScript ऑब्जेक्ट की वैल्यू मिलती है. इसी तरह, बाकी कमांड से भी वैल्यू मिलती है.

यहां दिए गए उदाहरण में, Elements पैनल में एक img एलिमेंट चुना गया है. Console ड्रॉअर में, $0 का आकलन किया गया है और इसमें वही एलिमेंट दिखता है:

शून्य डॉलर का उदाहरण.

नीचे दी गई इमेज में, उसी पेज पर कोई दूसरा एलिमेंट चुना गया है. अब $0 से, हाल ही में चुने गए एलिमेंट की वैल्यू मिलती है. वहीं, $1 से पहले चुने गए एलिमेंट की वैल्यू मिलती है:

एक डॉलर का उदाहरण.

$(selector [, startNode])

$(selector) से, दिए गए सीएसएस सिलेक्टर वाले पहले DOM एलिमेंट का रेफ़रंस मिलता है. एक आर्ग्युमेंट के साथ कॉल करने पर, यह फ़ंक्शन, document.querySelector() फ़ंक्शन का शॉर्टकट होता है.

यहां दिए गए उदाहरण से, दस्तावेज़ में मौजूद पहले <img> एलिमेंट का रेफ़रंस मिलता है:

$('img') का उदाहरण.

DOM में इसे ढूंढने के लिए, मिले नतीजे पर राइट क्लिक करें और Elements Panel में दिखाएं को चुनें. वहीं, पेज पर इसे दिखाने के लिए, देखने के लिए स्क्रोल करें को चुनें.

यहां दिए गए उदाहरण से, फ़िलहाल चुने गए एलिमेंट का रेफ़रंस मिलता है और इसकी src प्रॉपर्टी दिखती है:

$('img').src का उदाहरण.

इस फ़ंक्शन में दूसरा पैरामीटर, startNode भी इस्तेमाल किया जा सकता है. इससे यह तय किया जाता है कि एलिमेंट को किस 'एलिमेंट' या नोड से खोजा जाए. इस पैरामीटर की डिफ़ॉल्ट वैल्यू document होती है.

यहां दिए गए उदाहरण से, devsite-header-background का डिसेंडेंट (वंशज) होने वाले पहले img एलिमेंट का रेफ़रंस मिलता है और इसकी src प्रॉपर्टी दिखती है:

$('img', div).src का उदाहरण.

$$(selector [, startNode])

$$(selector) से, दिए गए सीएसएस सिलेक्टर से मैच होने वाले एलिमेंट की एक कैटगरी मिलती है. यह कमांड, Array.from(document.querySelectorAll()) को कॉल करने के बराबर है.

यहां दिए गए उदाहरण में, $$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}
 का इस्तेमाल किया गया है

सभी <code translate=<img> एलिमेंट
जो चुने गए नोड के बाद, मौजूदा दस्तावेज़ में दिखते हैं:


let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



दस्तावेज़ में select div एलिमेंट के बाद दिखने वाली सभी इमेज चुनने और उनके सोर्स दिखाने के लिए, $() का इस्तेमाल करने का उदाहरण.





$x(path [, startNode])



$x(path) से, दिए गए XPath एक्सप्रेशन से मैच होने वाले DOM एलिमेंट की एक कैटगरी मिलती है.



उदाहरण के लिए, इससे पेज पर मौजूद सभी <p> एलिमेंट मिलते हैं:


$x("//p")



XPath सिलेक्टर का इस्तेमाल करने का उदाहरण.



यहां दिए गए उदाहरण से, <p> के वे सभी एलिमेंट मिलते हैं जिनमें <a> एलिमेंट शामिल हैं:


$x("//p[a]")



ज़्यादा मुश्किल XPath सिलेक्टर इस्तेमाल करने का उदाहरण.



अन्य सिलेक्टर फ़ंक्शन की तरह, $x(path) में दूसरा पैरामीटर, startNode भी इस्तेमाल किया जा सकता है. इससे यह तय किया जाता है कि एलिमेंट को किस एलिमेंट या नोड से खोजा जाए.



startNode के साथ XPath सिलेक्टर का इस्तेमाल करने का उदाहरण.



clear()



clear() से, कंसोल का इतिहास मिट जाता है.


clear();



copy(object)



copy(object) से, दिए गए ऑब्जेक्ट का स्ट्रिंग वर्शन क्लिपबोर्ड पर कॉपी हो जाता है.


copy($0);



debug(function)



दिए गए फ़ंक्शन को कॉल करने पर, डीबगर शुरू हो जाता है और Sources पैनल में फ़ंक्शन के अंदर ब्रेक हो जाता है. इससे कोड को स्टेप-बाय-स्टेप चलाया जा सकता है और उसमें मौजूद गड़बड़ियों को ठीक किया जा सकता है.


debug(getData);



debug() की मदद से, किसी फ़ंक्शन में ब्रेकपॉइंट सेट करना.



फ़ंक्शन पर ब्रेक होने से रोकने के लिए, undebug(fn) का इस्तेमाल करें. वहीं, सभी ब्रेकपॉइंट बंद करने के लिए, यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करें.



ब्रेकपॉइंट के बारे में ज़्यादा जानने के लिए, ब्रेकपॉइंट की मदद से कोड को रोकना लेख पढ़ें.



dir(object)



dir(object) से, दिए गए ऑब्जेक्ट की सभी प्रॉपर्टी, ऑब्जेक्ट-स्टाइल लिस्टिंग में दिखती हैं. यह तरीका, Console API के console.dir() तरीके का शॉर्टकट है.



यहां दिए गए उदाहरण में, कमांड लाइन में सीधे document.body का आकलन करने और उसी एलिमेंट को दिखाने के लिए dir() का इस्तेमाल करने के बीच का अंतर दिखाया गया है:


document.body;
dir(document.body);



dir() फ़ंक्शन के साथ और उसके बिना document.body को लॉग करना.



ज़्यादा जानकारी के लिए, Console API में console.dir() की एंट्री देखें.



dirxml(object)



dirxml(object) से, दिए गए ऑब्जेक्ट का एक्सएमएल वर्शन दिखता है. यह Elements पैनल में दिखता है.
यह तरीका, console.dirxml() तरीके के बराबर है.



inspect(object/function)



inspect(object/function) से, दिए गए एलिमेंट या ऑब्जेक्ट को सही पैनल में खोला और चुना जाता है. जैसे, DOM एलिमेंट के लिए Elements पैनल या JavaScript हीप ऑब्जेक्ट के लिए Profiles पैनल.



यहां दिए गए उदाहरण में, Elements पैनल में document.body खोला गया है:


inspect(document.body);



inspect() का इस्तेमाल करके किसी एलिमेंट की जांच करना.



जांच के लिए कोई फ़ंक्शन पास करने पर, वह फ़ंक्शन Sources पैनल में दस्तावेज़ खोलता है, ताकि उसकी जांच की जा सके.



getEventListeners(object)



getEventListeners(object) से, दिए गए ऑब्जेक्ट पर रजिस्टर किए गए इवेंट लिसनर मिलते हैं. इससे मिलने वाली वैल्यू एक ऑब्जेक्ट होती है. इसमें रजिस्टर किए गए हर इवेंट टाइप (click या keydown, उदाहरण के लिए) के लिए एक कैटगरी शामिल होती है. हर कैटगरी के सदस्य, ऐसे ऑब्जेक्ट होते हैं जो हर टाइप के लिए रजिस्टर किए गए लिसनर के बारे में बताते हैं. उदाहरण के लिए, यहां दस्तावेज़ ऑब्जेक्ट पर रजिस्टर किए गए सभी इवेंट लिसनर की सूची दी गई है:


getEventListeners(document);



getEventListeners() का इस्तेमाल करने पर मिला आउटपुट.



अगर दिए गए ऑब्जेक्ट पर एक से ज़्यादा लिसनर रजिस्टर किए गए हैं, तो कैटगरी में हर लिसनर के लिए एक सदस्य शामिल होता है. यहां दिए गए उदाहरण में, click इवेंट के लिए दस्तावेज़ एलिमेंट पर दो इवेंट लिसनर रजिस्टर किए गए हैं:



एक से ज़्यादा लोग सुन रहे हों.



इनकी प्रॉपर्टी एक्सप्लोर करने के लिए, इनमें से हर ऑब्जेक्ट को और बड़ा किया जा सकता है:



लिसनर ऑब्जेक्ट का बड़ा किया गया व्यू.



ज़्यादा जानकारी के लिए, ऑब्जेक्ट की प्रॉपर्टी की जांच करना लेख पढ़ें.



keys(object)



keys(object) से, दिए गए ऑब्जेक्ट की प्रॉपर्टी के नामों वाली एक कैटगरी मिलती है. इन्हीं प्रॉपर्टी की जुड़ी वैल्यू पाने के लिए, values() का इस्तेमाल करें.



उदाहरण के लिए, मान लें कि आपके ऐप्लिकेशन ने यह ऑब्जेक्ट तय किया है:


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};



मान लें कि player को ग्लोबल नेमस्पेस में तय किया गया है (आसानी के लिए). ऐसे में, keys(player) और
values(player) को Console में टाइप करने पर, यह नतीजा मिलता है:



keys() और values() तरीकों का उदाहरण.



monitor(function)



दिए गए फ़ंक्शन को कॉल करने पर, कंसोल में एक मैसेज लॉग होता है. इसमें फ़ंक्शन का नाम और वे आर्ग्युमेंट शामिल होते हैं जो फ़ंक्शन को कॉल करते समय पास किए जाते हैं.


function sum(x, y) {
  return x + y;
}
monitor(sum);



monitor() तरीके का उदाहरण.



मॉनिटरिंग रोकने के लिए, unmonitor(function) का इस्तेमाल करें.



monitorEvents(object [, events])



दिए गए ऑब्जेक्ट पर, दिए गए इवेंट में से कोई एक होने पर, इवेंट ऑब्जेक्ट कंसोल में लॉग हो जाता है. मॉनिटर करने के लिए, एक इवेंट, इवेंट की कैटगरी या सामान्य इवेंट "टाइप" में से कोई एक तय किया जा सकता है. ये टाइप, इवेंट के पहले से तय कलेक्शन से मैप किए जाते हैं. उदाहरण देखें.



यहां दिए गए उदाहरण में, विंडो ऑब्जेक्ट पर होने वाले सभी रीसाइज़ इवेंट की निगरानी की जाती है.


monitorEvents(window, "resize");



विंडो के साइज़ में बदलाव करने वाले इवेंट को मॉनिटर करता है.



यहां दिए गए उदाहरण में, विंडो ऑब्जेक्ट पर "साइज़ बदलें" और "स्क्रोल करें" दोनों इवेंट की निगरानी करने के लिए एक कलेक्शन तय की गई है:


monitorEvents(window, ["resize", "scroll"])



इवेंट के उपलब्ध "टाइप" में से कोई एक भी तय किया जा सकता है. ये स्ट्रिंग, इवेंट के पहले से तय सेट से मैप की जाती हैं. यहां दी गई टेबल में, इवेंट के उपलब्ध टाइप और उनसे जुड़े इवेंट मैपिंग की सूची दी गई है:



इवेंट टाइप और उससे जुड़े मैप किए गए इवेंट
माउस"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
बटन"keydown", "keyup", "keypress", "textInput"
छूना"touchstart", "touchmove", "touchend", "touchcancel"
कंट्रोल"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"



उदाहरण के लिए, यहां "बटन" इवेंट टाइप का इस्तेमाल किया गया है. इससे Elements पैनल में फ़िलहाल चुने गए इनपुट टेक्स्ट फ़ील्ड पर होने वाले सभी बटन इवेंट की निगरानी की जाती है.


monitorEvents($0, "key");



टेक्स्ट फ़ील्ड में कोई वर्ण टाइप करने के बाद, यहां आउटपुट का नमूना दिया गया है:



मुख्य इवेंट को मॉनिटर करना.



मॉनिटरिंग रोकने के लिए, unmonitorEvents(object[, events]) का इस्तेमाल करें.



profile([name]) और profileEnd([name])



profile() से, JavaScript CPU प्रोफ़ाइलिंग सेशन शुरू होता है. इसमें नाम भी दिया जा सकता है. profileEnd()
से प्रोफ़ाइल पूरी हो जाती है. साथ ही, Performance पैनल अपने-आप खुल जाता है और नतीजे Main ट्रैक में दिखते हैं.





प्रोफ़ाइलिंग शुरू करने के लिए:


profile("Profile 1")



प्रोफ़ाइलिंग रोकने और Performance > Main ट्रैक में नतीजे देखने के लिए:


profileEnd("Profile 1")



Performance > Main ट्रैक में नतीजा:



परफ़ॉर्मेंस के मुख्य ट्रैक में मौजूद प्रोफ़ाइल 1.



प्रोफ़ाइल को नेस्ट भी किया जा सकता है. उदाहरण के लिए, यह किसी भी क्रम में काम करेगा:


profile('A');
profile('B');
profileEnd('A');
profileEnd('B');





queryObjects(Constructor)



दिए गए कंस्ट्रक्टर से बनाए गए ऑब्जेक्ट की कैटगरी पाने के लिए, कंसोल से queryObjects(Constructor) को कॉल करें. उदाहरण के लिए:



    

  • queryObjects(Promise). इससे Promise के सभी इंस्टेंस मिलते हैं.
    • 

  • queryObjects(HTMLElement). इससे सभी एचटीएमएल एलिमेंट मिलते हैं.
    • 

  • queryObjects(foo), जहां foo एक क्लास का नाम है. इससे new foo() के ज़रिए इंस्टैंशिएट किए गए सभी ऑब्जेक्ट मिलते हैं.
    • 




queryObjects() का स्कोप, कंसोल में फ़िलहाल चुना गया एक्ज़ीक्यूशन कॉन्टेक्स्ट होता है.



table(data [, columns])



डेटा ऑब्जेक्ट को टेबल फ़ॉर्मैट में लॉग करने के लिए, डेटा ऑब्जेक्ट को कॉलम के हेडर के साथ पास करें. कॉलम के हेडर देना ज़रूरी नहीं है.
यह console.table() का शॉर्टकट है.



उदाहरण के लिए, कंसोल में टेबल का इस्तेमाल करके नामों की सूची दिखाने के लिए, यह तरीका अपनाएं:


let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



table() तरीके का उदाहरण.



लॉग की गई टेबल को फ़ॉर्मैट की गई Markdown टेबल या CSV डेटा के तौर पर क्लिपबोर्ड पर कॉपी करने के लिए, Console में टेबल पर राइट क्लिक करें और कॉन्टेक्स्ट मेन्यू से, कॉपी करने का सही विकल्प चुनें.



undebug(function)



undebug(function) से, दिए गए फ़ंक्शन की डीबग करने की प्रोसेस रुक जाती है. इसलिए, फ़ंक्शन को कॉल करने पर, डीबगर शुरू नहीं होता. इसका इस्तेमाल, debug(fn) के साथ किया जाता है.


undebug(getData);



unmonitor(function)



unmonitor(function) से, दिए गए फ़ंक्शन की मॉनिटरिंग रुक जाती है. इसका इस्तेमाल, monitor(fn) के साथ किया जाता है.


unmonitor(getData);



unmonitorEvents(object [, events])



unmonitorEvents(object[, events]) से, दिए गए ऑब्जेक्ट और इवेंट की मॉनिटरिंग रुक जाती है. उदाहरण के लिए, यहां विंडो ऑब्जेक्ट पर होने वाली सभी इवेंट मॉनिटरिंग को रोका गया है:


unmonitorEvents(window);



किसी ऑब्जेक्ट पर होने वाले चुनिंदा इवेंट की मॉनिटरिंग भी रोकी जा सकती है. उदाहरण के लिए, यहां दिए गए कोड से, फ़िलहाल चुने गए एलिमेंट पर होने वाले सभी माउस इवेंट की मॉनिटरिंग शुरू होती है. इसके बाद, "mousemove" इवेंट की मॉनिटरिंग रुक जाती है. ऐसा शायद कंसोल आउटपुट में नॉइज़ कम करने के लिए किया जाता है:


monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");



values(object)



values(object) से, दिए गए ऑब्जेक्ट की सभी प्रॉपर्टी की वैल्यू वाली एक कैटगरी मिलती है.


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);



values(player) का नतीजा.