☝🏼 🗼 🔒 क्रोम कंसोल की विशेषताएं जो आपने कभी इस्तेमाल नहीं की होंगी 🚢 🔸 🤙🏼

Chrome डेवलपर टूल कंसोल संभवतः सबसे अधिक उपयोग किए जाने वाले और सबसे उपयोगी विशेष ब्राउज़र टूल में से एक है। कंसोल प्रोग्रामर को कई दिलचस्प विशेषताएं देता है। यह डिबगिंग, प्रोफाइलिंग और मॉनिटरिंग पेज कोड में मदद करता है। आज हम जिस सामग्री का अनुवाद कर रहे हैं, वह आपको क्रोम कंसोल की कुछ विशेषताओं के बारे में बताने के लिए समर्पित है, जो व्यापक रूप से ज्ञात नहीं हैं जिनके वे हकदार हैं।

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

फ़ंक्शन का monitorउपयोग अन्य कार्यों की निगरानी को व्यवस्थित करने के लिए किया जाता है। विशेष रूप से, यह आपको यह पता लगाने की अनुमति देता है कि किसी निश्चित फ़ंक्शन को कब बुलाया गया था, और इसे किस मापदंडों के साथ बुलाया गया था। एक उदाहरण पर विचार करें (इसका कोड क्रोम कंसोल में दर्ज किया गया है):

function traceFunc (arg) { }
monitor(traceFunc)

फ़ंक्शन को traceFuncफ़ंक्शन monitorको तर्क के रूप में पास किया जाता है। अब, जब फ़ंक्शन traceFuncको कॉल किया जाता है, तो हम इस बारे में एक सूचना प्राप्त करेंगे (फिर, कंसोल में):

traceFunc(90)
function traceFunc was called with arguments: 90

मॉनिटर फ़ंक्शन का उपयोग करना

अनाकर्षक कार्य

फ़ंक्शन unmonitorआपको किसी फ़ंक्शन की निगरानी को अक्षम करने की अनुमति देता है जिसे पहले फ़ंक्शन का उपयोग करके मॉनिटर किया गया था monitor। फ़ंक्शन की निगरानी करना बंद करने के लिए traceFunc, हम निम्नलिखित निर्माण का उपयोग करते हैं:

unmonitor(traceFunc)

यदि आप इसके बाद कॉल करते हैं traceFunc, तो कंसोल में कोई सूचना प्रदर्शित नहीं होगी।

traceFunc(90)

एक फ़ंक्शन को कॉल करना जिसकी मॉनिटरिंग अक्षम है, इस कॉल के बारे में जानकारी को कंसोल में आउटपुट करने के परिणामस्वरूप नहीं है

मॉनिटरएवेंट्स फंक्शन

फ़ंक्शन उपयोग योजना monitorEventsइस तरह दिखती है:

monitorEvents(object,[,events])

यह फ़ंक्शन आपको ऑब्जेक्ट ईवेंट की घटना को ट्रैक करने की अनुमति देता है और कंसोल में इन घटनाओं के बारे में जानकारी प्रदर्शित करता है।

मान लीजिए कि निम्नलिखित कोड द्वारा वर्णित पृष्ठ पर एक बटन है:

<button id="button">Button</button>

आइए clickइस बटन की घटना पर नज़र रखना शुरू करें:

monitorEvents(button, "click")

यदि किसी घटना का अवलोकन शुरू करने के बाद, clickबटन पर क्लिक करें - घटना के बारे में जानकारी कंसोल में प्रदर्शित की जाएगी।

बटन और इसकी घटनाओं की निगरानी शुरू करें क्लिक करें आप दूसरे तर्क के

कार्यों केmonitorEventsरूप में एक सरणीपास करके कई घटनाओं की निगरानी कर सकते हैं:

monitorEvents(button, ["click", "mouseover"])

अब अवलोकन के तहत घटनाओं clickऔर हैं mouseover। नतीजतन, कंसोल बटन पर क्लिक करने के बारे में संदेश प्राप्त करता है, और यह माउस पर आयोजित किया गया था।

क्लिक और माउसओवर बटन की घटनाओं की निगरानी

आप इवेंट समूहों की निगरानी को व्यवस्थित कर सकते हैं:

monitorEvents(button, ["click", "mouse"])

mouseमाउस से संबंधित घटनाओं के समूह के लिए एक स्ट्रिंग एक सार्वभौमिक पहचानकर्ता है। उदाहरण के लिए - mouseover, mousemove, mouseout। जैसे विशिष्ट आयोजनों की सदस्यता लेने के मामले में, सार्वभौमिक ईवेंट आइडेंटिफ़ायर की सदस्यता लेने से इस तरह के ईवेंट होने पर सूचनाएं जारी की जा सकेंगी।

उस पर क्लिक करने

और निश्चित रूप से माउस के साथ संबंधित बटन घटनाओं की निगरानी करना , फ़ंक्शनmonitorEventsअन्य वस्तुओं पर लागू होता है, और केवल बटन नहीं। वही उन घटनाओं पर लागू होता है जिन्हें इसके साथ देखा जा सकता है। ये केवलclickमाउस इवेंटनहीं हैं।

UnmonitorEvents फ़ंक्शन

फ़ंक्शन unmonitorEventsआपको फ़ंक्शन द्वारा शुरू की गई ऑब्जेक्ट घटनाओं की निगरानी को रद्द करने की अनुमति देता है monitorEvents।

मान लें कि हम बटन क्लिक को ट्रैक करने का निर्णय लेते हैं:

monitorEvents(button, "click")

परिणामस्वरूप, जब बटन पर क्लिक किया जाता है, तो इन घटनाओं की जानकारी कंसोल को मिल जाती है। निगरानी रोकने के लिए, हमें इस डिज़ाइन की आवश्यकता है:

unmonitorEvents(button, "click")

अब सिस्टम clickबटन घटना की निगरानी करना बंद कर देता है ।

क्लिक इवेंट पर नज़र रखने से इनकार करने के बाद, कंसोल पर जाने के लिए एक बटन पर क्लिक के बारे में रिपोर्ट

$ _ निर्माण

डिज़ाइन $_आपको कंसोल में निष्पादित अंतिम अभिव्यक्ति के परिणाम तक पहुंचने की अनुमति देता है।

मान लीजिए हमने कंसोल में एक अभिव्यक्ति दर्ज की 2 + 2और इसे निष्पादित किया। इसने हमें दिया 4।

फिर हमने अभिव्यक्ति दर्ज की और निष्पादित किया 3*2। इसने हमें दिया 6।

यह पता चला कि हमने दो अभिव्यक्तियां कीं, जिनमें से सबसे हालिया है 3*2। यदि अब कंसोल में दर्ज $_करें और क्लिक करें Enter- अभिव्यक्ति का परिणाम प्रदर्शित होता है 3*2, वह है - 6।

$ _ निर्माण का उपयोग करना

फ़ंक्शन की प्रतिलिपि बनाएँ

फ़ंक्शन copyआपको क्लिपबोर्ड पर स्थानांतरित किए गए डेटा की प्रतिलिपि बनाने की अनुमति देता है।

उदाहरण के लिए, निम्नलिखित कमांड निष्पादित करते हैं:

copy("nnamdi")

यह लाइन को क्लिपबोर्ड पर कॉपी कर देगा nnamdi। इसे जांचने के लिए, उपर्युक्त कमांड को कंसोल में निष्पादित करें, और उसके बाद ब्राउज़र के एड्रेस बार में क्लिपबोर्ड पर चिपकाने की कोशिश करें। आपको कुछ ऐसा प्राप्त करना चाहिए जो निम्न छवि जैसा दिखता है।

क्लिपबोर्ड में डेटा कॉपी करने वाला सॉफ्टवेयर

स्पष्ट कार्य

फ़ंक्शन clearआपको कंसोल में कमांड निष्पादन के इतिहास को साफ़ करने की अनुमति देता है। यह फ़ंक्शन उन मामलों में उपयोगी होता है जब कंसोल इसमें प्रदर्शित विभिन्न सामग्रियों से भरा होता है, और आप इसे उसमें प्रदर्शित होने वाली हर चीज से हटाना चाहेंगे।

कुंजी समारोह

keys(object)विधि की तरह फ़ंक्शन , Object.keysऑब्जेक्ट गुण कुंजियों का एक सरणी देता है:

const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)

चाबियाँ समारोह का उपयोग करना

मान समारोह

फ़ंक्शन valuesएक विधि के समान है Object.values। यह ऑब्जेक्ट गुण मानों की एक सरणी देता है।

const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)

मान फ़ंक्शन का उपयोग करना

GetEventListeners फ़ंक्शन

फ़ंक्शन getEventListenersऑब्जेक्ट के लिए पंजीकृत घटनाओं के बारे में जानकारी देता है। उदाहरण के लिए, यदि आप एक बटन के लिए कुछ घटनाओं को पंजीकृत करते हैं, तो getEventListenersइस बटन को दिया गया फ़ंक्शन किसी ऑब्जेक्ट को वापस कर देगा, सरणियों के रूप में, बटन की घटनाओं का विवरण।

मान लीजिए कि पृष्ठ में यह कोड है:

<button id="button" 
    onclick="clickHandler()" 
    onmousedown="mousedownHandler()" 
    onmouseover="mouseoverHandler()">
        Button
</button>
<script>
    function clickHandler() {
    }
    function mousedownHandler() {
    }
    function mouseoverHandler() {
    }
</script>

इस कोड बटन और तीन घटनाओं का वर्णन: click, onmousedown, और onmouseover। घटनाओं को हैंडलर सौंपा गया है clickHandler, mousedownHandlerऔर mouseoverHandler।

कंसोल में निम्न आदेश कॉल करें:

getEventListeners(button)

बटन ईवेंट हैंडलर के बारे में जानकारी

कमांड निष्पादित होने के बाद जारी किए गए ऑब्जेक्टgetEventListeners(button)में गुण होते हैंclick,mousedownऔरmouseover, जिनके नाम उन ईवेंट के नामों के अनुरूप होते हैं जिनके हैंडलर बटन को सौंपे जाते हैं। गुणों में वस्तुओं की सरणियाँ होती हैं जिनमें घटनाओं के बारे में विस्तृत जानकारी होती है।

समारोह $

फ़ंक्शन $उन डोम तत्वों में से पहला देता है जो चयनकर्ता से मेल खाते हैं। फ़ंक्शन कॉल आरेख इस तरह दिखता है:

$(elementName, [,node])

मान लीजिए कि पृष्ठ में निम्नलिखित कोड है:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

यह कोड चार बटन का वर्णन करता है।

चलिए निम्नलिखित कमांड निष्पादित करते हैं:

$("button")

निम्नलिखित दिखाता है कि इसके निष्पादन के बाद कंसोल में क्या मिलता है।

$ ("बटन")

कमांड का परिणामButton1 ।जैसा कि आप देख सकते हैं, कमांड ने एक बटन वापस किया। यह बटनbuttonदस्तावेज़ मेंपहला तत्वहै। हमारे पास अपने निपटान में किसी तत्व का DOM नोड होने के बाद, हम उसके गुणों और विधियों का उल्लेख कर सकते हैं।

उदाहरण के लिए, एक बटन के पहचानकर्ता का पता लगाने के लिए, आप इस निर्माण का उपयोग कर सकते हैं:

$("button").id

बटन के पहचानकर्ता का स्पष्टीकरण

फ़ंक्शन का उपयोग करके$, आप डोम नोड को निर्दिष्ट कर सकते हैं, जिसमें से पहला तत्व जिसमें हम रुचि रखते हैं।

मान लीजिए कि बटनButton2,Button3औरButton4पिछले उदाहरण से एक तत्व में रखा गया है<div>:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
    <button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
    <button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
    <button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>

इनमें से नेस्टेड होने वाले पहले बटन को चुनने के लिए <div>, आप निम्न कमांड का उपयोग कर सकते हैं:

$("button", document.querySelector("div"))

किसी तत्व को किसी अन्य तत्व में पहुंचाना

जैसा कि आप देख सकते हैं, यह अब$एक बटन देता हैButton2, क्योंकि यह तत्व में पहलाbuttonतत्व है<div>

$ $ फंक्शन

फ़ंक्शन $$उपरोक्त फ़ंक्शन के समान कार्य करता है $। लेकिन यह सभी मिलान तत्वों को लौटाता है। इसे इस तरह कहा जाता है:

$$(element, [,node])

मान लीजिए किसी पृष्ठ पर चार बटन हैं, जैसा कि पिछले उदाहरणों में है।

निम्नलिखित आदेश को कॉल करें:

$$("button")

$ $ फ़ंक्शन का उपयोग

कॉल के बाद$$, जैसा कि पिछले आंकड़े में देखा गया है, हमारे पास हमारे निपटान में तत्वों की एक सरणी हैbutton। DOM नोड

कहे जाने पर निर्दिष्ट किए गए तत्वों में से तत्वों का चयन भी किया जा सकता$$है। उदाहरण के लिए, यदि किसी पृष्ठ में कई बटन संलग्न हैं<div>, तो हम इन सभी बटन का चयन कर सकते हैं, इस डिजाइन का उपयोग करें:

$$("button", document.querySelector("div"))

किसी अन्य आइटम में नेस्टेड आइटम का चयन करने के लिए $ $ फ़ंक्शन का उपयोग करना

सारांश

क्रोम कंसोल एक उपयोगी उपकरण है। जैसे ही क्रोम के नए संस्करण उपलब्ध होते हैं, इसके कंसोल की क्षमताओं का विस्तार होता है। इसलिए, कुछ नए और दिलचस्प की तलाश में समय-समय पर यहां देखना उपयोगी है ।

प्रिय पाठकों! Chrome कंसोल टूल का आप सबसे अधिक बार क्या उपयोग करते हैं?

क्रोम कंसोल की विशेषताएं जो आपने कभी इस्तेमाल नहीं की होंगी