इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Kayce Basques

Sofia Emelianova

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

क्या आपको console.log(), console.error(), और console.* के अन्य फ़ंक्शन चाहिए? Console API का संदर्भ पढ़ें.

$_

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

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

$_ सबसे हाल ही में जांचा गया एक्सप्रेशन है.

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

नए निर्देशों का आकलन होने पर $_ बदलता है.

$0 - $4

$0, $1, $2, $3, और $4 निर्देश, एलिमेंट पैनल में जांच किए गए आखिरी पांच DOM एलिमेंट या प्रोफ़ाइल पैनल में चुने गए आखिरी पांच JavaScript हीप ऑब्जेक्ट के ऐतिहासिक रेफ़रंस के तौर पर काम करते हैं. $0 सबसे हाल ही में चुना गया एलिमेंट या JavaScript ऑब्जेक्ट दिखाता है. $1, सबसे हाल ही में चुना गया दूसरा एलिमेंट दिखाता है और इसी तरह अन्य एलिमेंट दिखाता है.

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

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

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

$1 का उदाहरण.

$(selector [, startNode])

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

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

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

दिखाए गए नतीजे पर राइट क्लिक करें और उसे डीओएम में ढूंढने के लिए एलिमेंट पैनल में दिखाएं चुनें. इसके अलावा, उसे पेज पर दिखाने के लिए इसमें स्क्रोल करके देखें को भी चुना जा सकता है.

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

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

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

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

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

ध्यान दें: अगर jQuery जैसी किसी ऐसी लाइब्रेरी का इस्तेमाल किया जा रहा है जो $ का इस्तेमाल करती है, तो यह फ़ंक्शन ओवरराइट हो जाएगा और $ उस लाइब्रेरी के लागू किए जाने के तरीके से मेल खाएगा.

$$(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);
}
 का इस्तेमाल किया गया है
l10n-placeholder3() की मदद से, चुने गए नोड के बाद मौजूदा दस्तावेज़ में दिखने वाले सभी <img> एलिमेंट का कलेक्शन बनाया जा सकता है:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



ध्यान दें: स्क्रिप्ट चलाए बिना नई लाइन शुरू करने के लिए, कंसोल में Shift + Enter दबाएं.

$x(path [, startNode])

$x(path) ऐसे DOM एलिमेंट का अरे दिखाता है जो दिए गए एक्स पाथ एक्सप्रेशन से मेल खाते हैं.

उदाहरण के लिए, यह नतीजा, पेज पर मौजूद सभी <p> एलिमेंट दिखाता है:
$x("//p")



इस उदाहरण में, <a> एलिमेंट वाले सभी <p> एलिमेंट दिखाए गए हैं:
$x("//p[a]")



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



मिटाएं()

clear() अपने इतिहास के कंसोल को मिटा देता है.
clear();

कॉपी(ऑब्जेक्ट)

copy(object) बताए गए ऑब्जेक्ट के स्ट्रिंग को क्लिपबोर्ड पर कॉपी करता है.
copy($0);

डीबग(फ़ंक्शन)

जब बताए गए फ़ंक्शन को कॉल किया जाता है, तो डीबगर शुरू हो जाता है और सोर्स पैनल में फ़ंक्शन के अंदर काम करना बंद कर देता है. इससे, कोड को समझने और उसे डीबग करने में मदद मिलती है.
debug(getData);



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

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

dir(object)

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

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



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

Dirxml(ऑब्जेक्ट)

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

inspect(object/function)

inspect(object/function) को चुनकर, सही पैनल में मौजूद एलिमेंट या ऑब्जेक्ट को चुना जाता है: डीओएम एलिमेंट के लिए एलिमेंट पैनल या JavaScript हीप ऑब्जेक्ट के लिए प्रोफ़ाइल पैनल.

इस उदाहरण से, एलिमेंट पैनल में document.body खुलता है:
inspect(document.body);



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

getEventListeners(object)

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



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



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



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

कुंजी(ऑब्जेक्ट)

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

उदाहरण के लिए, मान लें कि आपके ऐप्लिकेशन ने नीचे दिया गया ऑब्जेक्ट तय किया:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

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



monitor(function)

जब बताए गए फ़ंक्शन को कॉल किया जाता है, तो कंसोल में एक मैसेज लॉग किया जाता है जो फ़ंक्शन के नाम के साथ-साथ उन आर्ग्युमेंट के बारे में बताता है जो उसे कॉल करते समय फ़ंक्शन में पास किए जाते हैं.
function sum(x, y) {
  return x + y;
}
monitor(sum);



निगरानी बंद करने के लिए unmonitor(function) का इस्तेमाल करें.

monitorEvents(object [, events])

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

नीचे दिए गए बटन, विंडो ऑब्जेक्ट पर साइज़ बदलने वाले सभी इवेंट पर नज़र रखते हैं.
monitorEvents(window, "resize");



यह नीचे दिए गए कलेक्शन से, विंडो ऑब्जेक्ट पर "साइज़" और "स्क्रोल", दोनों इवेंट पर नज़र रखने के बारे में जानकारी देता है:
monitorEvents(window, ["resize", "scroll"])

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

इवेंट का टाइप और मैप किए गए संबंधित इवेंट
माउस "mousedown", "mouseup", "क्लिक", "dblclick", "mousemove", "माउसओवर", "माउसआउट", "माउसव्हील"
बटन "कीडाउन", "कीप", "कीप्रेस", "textइनपुट"
छूना "टचस्टार्ट", "टचपॉइंट", "टचएंड", "टच रद्द"
कंट्रोल "साइज़ बदलें", "स्क्रोल", "ज़ूम करें", "फ़ोकस", "धुंधला करें", "चुनें", "बदलें", "सबमिट करें", "रीसेट करें"

उदाहरण के लिए, नीचे दी गई टेबल में, एलिमेंट पैनल में चुने गए इनपुट टेक्स्ट फ़ील्ड से जुड़े सभी मुख्य इवेंट के "कुंजी" इवेंट टाइप का इस्तेमाल किया जाता है.
monitorEvents($0, "key");

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



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

प्रोफ़ाइल([name]) और profileEnd([name])

profile(), वैकल्पिक नाम से JavaScript सीपीयू प्रोफ़ाइलिंग सेशन शुरू करता है. profileEnd()
प्रोफ़ाइल को पूरा करता है और नतीजों को परफ़ॉर्मेंस > मुख्य ट्रैक में दिखाता है.

ध्यान दें: profile() और profileEnd(), console.profile() और console.profileEnd() के शॉर्टहैंड हैं.

प्रोफ़ाइल बनाना शुरू करने के लिए:
profile("Profile 1")

प्रोफ़ाइल बनाना बंद करने और परफ़ॉर्मेंस > मुख्य ट्रैक में नतीजे देखने के लिए:
profileEnd("Profile 1")

परफ़ॉर्मेंस > मुख्य ट्रैक का नतीजा:

 मुख्य ट्रैक." चौड़ाई="800" लंबाई="606">

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

ध्यान दें: कई सीपीयू प्रोफ़ाइल एक साथ काम कर सकती हैं. साथ ही, आपको उन्हें बनाने के क्रम में बंद करने की ज़रूरत नहीं है.

queryObjects(Constructor)

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


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


queryObjects() का स्कोप, कंसोल में मौजूदा समय पर लागू होने वाला कॉन्टेक्स्ट है.

टेबल(डेटा [, कॉलम])

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

उदाहरण के लिए, कंसोल में टेबल का इस्तेमाल करके नामों की सूची दिखाने के लिए, आपको ये काम करने होंगे:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



अनडीबग(फ़ंक्शन)

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

अनमॉनिटर(फ़ंक्शन)

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

unmonitorEvents(object [, events])

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

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

वैल्यू(ऑब्जेक्ट)

values(object) एक ऐसा कलेक्शन दिखाता है जिसमें बताए गए ऑब्जेक्ट से जुड़ी सभी प्रॉपर्टी की वैल्यू होती हैं.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

इवेंट का टाइप और मैप किए गए संबंधित इवेंट
माउस	"mousedown", "mouseup", "क्लिक", "dblclick", "mousemove", "माउसओवर", "माउसआउट", "माउसव्हील"
बटन	"कीडाउन", "कीप", "कीप्रेस", "textइनपुट"
छूना	"टचस्टार्ट", "टचपॉइंट", "टचएंड", "टच रद्द"
कंट्रोल	"साइज़ बदलें", "स्क्रोल", "ज़ूम करें", "फ़ोकस", "धुंधला करें", "चुनें", "बदलें", "सबमिट करें", "रीसेट करें"