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

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

Kayce Basques

Sofia Emelianova

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

क्या आपको console.log(), console.error(), और console.* के अन्य फ़ंक्शन चाहिए? यहां जाएं: कंसोल एपीआई का रेफ़रंस.

$_

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

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

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

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

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

$0 - $4

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

इस उदाहरण में, Elements पैनल में 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);
}
 का इस्तेमाल किया गया है
&lt;img&gt; एलिमेंट
जो चुने गए नोड के बाद मौजूदा दस्तावेज़ में दिखते हैं:
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() अपने इतिहास के कंसोल को मिटा देता है.
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), बताए गए ऑब्जेक्ट को एक्सएमएल के रूप में प्रिंट करता है, जैसा कि Elements पैनल में देखा जा सकता है.
यह तरीका, console.dirxml() तरीके के बराबर है.

inspect(object/function)

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

इस उदाहरण से, Elements पैनल में 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) से ये नतीजे मिलते हैं:



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

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



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

monitorEvents(object [, events])

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

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



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

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

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

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

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



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

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

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

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

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

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

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



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

किसी ऑब्जेक्ट पर चुनिंदा इवेंट को मॉनिटर करना भी बंद किया जा सकता है. उदाहरण के लिए, निम्न
कोड, चुने गए एलिमेंट पर माउस के सभी इवेंट को मॉनिटर करना शुरू करता है और फिर निगरानी करना बंद कर देता है
"माउसमूव" इवेंट (शायद कंसोल आउटपुट में नॉइज़ कम करने के लिए):
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इनपुट"
छूना	"टचस्टार्ट", "टचपॉइंट", "टचएंड", "टच रद्द"
कंट्रोल	"साइज़ बदलें", "स्क्रोल", "ज़ूम करें", "फ़ोकस", "धुंधला करें", "चुनें", "बदलें", "सबमिट करें", "रीसेट करें"