Chrome डेवलपर टूल में == $ 0 (डबल बराबर डॉलर शून्य) का क्या अर्थ है?

310

Google Chrome के डेवलपर टूल में, जब मैं किसी तत्व का चयन करता हूं, तो मैं ==$0चयनित तत्व के बगल में देखता हूं । इसका क्या मतलब है?

google-chrome google-chrome-devtools code-inspection

— oneNiceFriend
स्रोत

28

यह चयनित DOM Node id है। किसी भी नोड का चयन करने की कोशिश करें और $0कंसोल में लिखें और देखें कि क्या आता है;)

— गतिरोध

33

यह बहुत भ्रामक है। ऐसा लगता है कि किसी ने कुछ जावास्क्रिप्ट लिखी थी जिसे वे स्क्रिप्ट टैग में डालना भूल गए थे। मैं एक अच्छा दस मिनट बिताकर यह पता लगाने की कोशिश कर रहा था कि मैंने अपने कोड में कहां गड़बड़ की है ...

— किप

2

निम्न डेवलपर की

— मुकेश

2

मुझे लगता है कि क्लिक की गई लाइन में केवल अलग पृष्ठभूमि का रंग पर्याप्त होना चाहिए ... मुझे html स्रोत में == $ 0 जोड़ने की कोई आवश्यकता नहीं है ... बुरा विचार। Chrome doind Chrome-ish सामान।

— सर्जियो अब्रेउ

Developers.google.com/web/tools/chrome-devtools/console/…

— पेसियर

286

यह अंतिम चयनित DOM नोड इंडेक्स है। Chrome आपके द्वारा चुने गए प्रत्येक DOM नोड पर एक इंडेक्स प्रदान करता है। इसलिए $0हमेशा आपके द्वारा चुने गए अंतिम नोड $1को इंगित करेगा , जबकि आपके द्वारा चुने गए नोड को इंगित करेगा। इसे हाल ही में चुने गए नोड्स के ढेर की तरह समझें।

एक उदाहरण के रूप में, निम्नलिखित पर विचार करें

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

अब आपने devtools कंसोल को ओपन किया और सिलेक्ट किया #sunday, #mondayऔर #tuesdayउल्लेखित क्रम में, आपको आईडी मिलेंगे जैसे:

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

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

angular.element($0).scope()

Voila आपको कंसोल के माध्यम से नोड गुंजाइश तक पहुंच मिली।

— गतिरोध
स्रोत

9

इसका उपयोग / लाभ क्या है?

— joe_young 19

6

मेरा मानना है कि यह डिबगिंग में मददगार हो सकता है। एक साधारण चयनकर्ता का उपयोग करके निरीक्षण किए गए तत्व तक पहुंचने की क्षमता डिबगिंग के दौरान कई स्थितियों में मदद कर सकती है।

— गतिरोध

6

== $0यूआई में हमेशा क्या अच्छा है ? जो कोई भी इसके बारे में जानता है $0वह पहले से ही जानता है कि यह कौन सा तत्व है, और यह किसी भी व्यक्ति के लिए अर्थहीन है जो नहीं करता है।

— ब्लूराजा - डैनी पफ्लुगुफ्ट

6

@joe_young, मुझे लगता है कि चीजों को तोड़-मरोड़ते हुए फ़ायदा जल्दी से तत्वों को कंसोल में एक्सेस करने में सक्षम हो रहा है। यहाँ एक वीडियो है जिसे मैंने एक साथ प्रदर्शित किया है! youtu.be/AKLdx8z6aDk

— RoccoB

1

@LucaDeNardi हाँ, यह उत्पादन में हानिकारक है और हर कोणीय डेवलपर इस लाइन को जोड़ता है: - $ compileProvider.debugInfoEnabled (false); एक प्रदर्शन को बढ़ावा देने के लिए उनके अनुप्रयोग के विन्यास में। हालाँकि आप आसानी से angular.reloadWithDebugInfo () चला सकते हैं; जब आवश्यकता हो कंसोल में डीबग करें।

— वरुण शर्मा

57

$ 0 सबसे हाल ही में चयनित तत्व या जावास्क्रिप्ट ऑब्जेक्ट लौटाता है, $ 1, दूसरा सबसे हाल ही में चुना गया एक रिटर्न, और इसी तरह।

संदर्भ: कमांड लाइन एपीआई संदर्भ

— एनी मेनन
स्रोत

26

यहाँ अन्य उत्तरों ने स्पष्ट रूप से बताया कि इसका क्या अर्थ है। मुझे इसके उपयोग की व्याख्या करना पसंद है।

आप elementsटैब में एक तत्व का चयन कर सकते हैं और consoleक्रोम में टैब पर स्विच कर सकते हैं । बस टाइप करें $0 or $1या जो भी संख्या और प्रेस दर्ज करें और तत्व आपके उपयोग के लिए कंसोल में प्रदर्शित किया जाएगा।

— शिव प्रकाश
स्रोत

13

यह क्रोम का संकेत है जो आपको बताता है कि यदि आप कंसोल पर $ 0 टाइप करते हैं, तो यह उस विशिष्ट तत्व के बराबर होगा।

आंतरिक रूप से, क्रोम एक स्टैक रखता है, जहां $ 0 चयनित तत्व है, $ 1 वह तत्व है जिसे अंतिम रूप से चुना गया था, $ 2 वह होगा जो $ 1 से पहले चुना गया था और इसी तरह।

यहाँ इसके कुछ अनुप्रयोग दिए गए हैं:

कंसोल से DOM तत्वों को एक्सेस करना: $ 0
कंसोल से उनके गुणों को एक्सेस करना: $ 0.parentlement
कंसोल से उनके गुणों को अपडेट करना: $ 1.classList.add (...)
कंसोल से CSS तत्वों को अपडेट करना: $ 0.styles.backgroundColor = "एक्वा"
कंसोल से सीएसएस घटनाओं को ट्रिगर करना: $ 0.click ()
और बहुत अधिक जटिल चीजें करना, जैसे: $ 0.appendChild (document.createElement ("div"))

इस क्रिया में सभी देखें:

समर्थन कथन:

हां, मैं मानता हूं कि इन कार्यों को करने के लिए बेहतर तरीके हैं, लेकिन यह सुविधा कुछ जटिल परिदृश्यों में काम कर सकती है , जैसे कि जब एक DOM तत्व को क्लिक करने की आवश्यकता होती है, लेकिन यह UI से ऐसा करना संभव नहीं है क्योंकि यह इसके द्वारा कवर किया गया है अन्य तत्व या, किसी कारण से, उस समय UI पर दिखाई नहीं देता है।

— सागर
स्रोत

2

मैं कहूंगा कि डीबगिंग समय के दौरान html तत्व का संदर्भ प्राप्त करने के लिए यह केवल शॉर्टहैंड सिंटैक्स है, सामान्य रूप से इस तरह के कार्य इस विधि द्वारा दिए जाएंगे

document.getElementById , document.getElementsByClassName , document.querySelector

इसलिए html एलिमेंट पर क्लिक करना और कंसोल में रेफरेंस वैरिएबल ($ 0) मिलना दिन के दौरान एक बहुत बड़ी बचत है

— malbarmavi
स्रोत