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

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

Kayce Basques

Sofia Emelianova

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

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

$_

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

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

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

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

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

0 से 4 डॉलर

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

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

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

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

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

$(selector [, startNode])

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

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

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

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

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

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

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

इस उदाहरण में, devsite-header-background का डिसेंडेंट (चाइल्ड) होने वाले पहले img एलिमेंट का रेफ़रंस दिखाया गया है. साथ ही, इसकी 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);
}

चुने गए नोड के बाद, मौजूदा दस्तावेज़ में दिखने वाले<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), दिए गए XPath एक्सप्रेशन से मेल खाने वाले DOM एलिमेंट की एक कैटगरी दिखाता है.

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



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



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



clear()

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

copy(object)

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

debug(function)

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



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

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

dir(object)

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

नीचे दिए गए उदाहरण में, कमांड लाइन में सीधे तौर पर document.body का आकलन करने और उसी एलिमेंट को दिखाने के लिए 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);



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

getEventListeners(object)

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



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



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



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

keys(object)

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

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

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



monitor(function)

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



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

monitorEvents(object [, events])

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

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



यहां विंडो ऑब्जेक्ट पर "resize" और "scroll" दोनों इवेंट को मॉनिटर करने के लिए, एक कलेक्शन तय किया गया है:
monitorEvents(window, ["resize", &quot;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"

उदाहरण के लिए, यहां "key" इवेंट टाइप का इस्तेमाल किया गया है. इससे Elements पैनल में फ़िलहाल चुने गए इनपुट टेक्स्ट फ़ील्ड पर मौजूद सभी मुख्य इवेंट ट्रिगर होते हैं.
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")

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



प्रोफ़ाइलों को नेस्ट भी किया जा सकता है. उदाहरण के लिए, यह किसी भी क्रम में काम करेगा:
profile('A');
profile('B');
profileEnd('A&#39;);
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);



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, &quot;mousemove");

values(object)

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

values(player);

इवेंट टाइप और उससे मैप किए गए इवेंट
चूहा	"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"