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

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

कायस बैस्क

Twitter GitHub Glitch

सोफ़िया इमेलियानोवा

GitHub

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

क्या आपको console.log(), console.error(), और बाकी console.* फ़ंक्शन की तलाश है? कंसोल एपीआई का रेफ़रंस देखें.

$_

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

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

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

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

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

0 डॉलर - 4 डॉलर

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

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

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

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

$1 का उदाहरण.

$(सिलेक्टर [, startNode])

$(selector), दिए गए सीएसएस सिलेक्टर वाले पहले डीओएम एलिमेंट का रेफ़रंस देता है. जब एक आर्ग्युमेंट के साथ कॉल किया जाता है, तो यह फ़ंक्शन 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(पाथ [, startNode])

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

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



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



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



हटाएं()

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

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

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

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

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



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

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

dir(object)

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

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



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

डीरएक्सएमएल(ऑब्जेक्ट)

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

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

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



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

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

इवेंट टाइप और उससे जुड़े मैप किए गए इवेंट
माउस "माउसडाउन", "mouseup", "क्लिक करें", "dblclick", "mousemove", "mouseover", "mouseout", "mouseव्हील"
बटन "keydown", "keyup", "keypress", "textInput"
छूना "टचस्टार्ट", "टचमूव", "टचएंड", "टचरद्द"
कंट्रोल "साइज़ बदलें", "स्क्रोल", "ज़ूम", "फ़ोकस", "धुंधला करें", "चुनें", "बदलें", "सबमिट करें", "रीसेट करें"

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

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



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

Profile([name]) और ProfileEnd([name])

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

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

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

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

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

 मुख्य ट्रैक."width="800"height="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);

इवेंट टाइप और उससे जुड़े मैप किए गए इवेंट
माउस	"माउसडाउन", "mouseup", "क्लिक करें", "dblclick", "mousemove", "mouseover", "mouseout", "mouseव्हील"
बटन	"keydown", "keyup", "keypress", "textInput"
छूना	"टचस्टार्ट", "टचमूव", "टचएंड", "टचरद्द"
कंट्रोल	"साइज़ बदलें", "स्क्रोल", "ज़ूम", "फ़ोकस", "धुंधला करें", "चुनें", "बदलें", "सबमिट करें", "रीसेट करें"