क्रोम डेवलपर टूल्स की 10 अल्प-ज्ञात विशेषताएं

जिस पोस्ट का हम अनुवाद कर रहे हैं उसका लेखक लगभग हर दिन क्रोम डेवलपर टूल का उपयोग करता है। यहां वह इन उपकरणों की अल्पज्ञात विशेषताओं के बारे में बात करना चाहता है। वह कहता है कि यदि वह पहले उनके बारे में जानता था, तो वे निश्चित रूप से उसके लिए उपयोगी होंगे।

1. अध्ययन के तहत किसी भी तत्व का लिंक पाने का एक सरल तरीका

Chrome डेवलपर टूल आपको कंसोल में जांच के तहत किसी भी तत्व का लिंक प्राप्त करने की अनुमति देते हैं। ऐसा करने के लिए, Elements पैनल में काम करना, एक तत्व पर राइट-क्लिक करें और ड्रॉप-डाउन मेनू से Store as global variable चुनें।


जांच के तहत किसी भी तत्व का लिंक पाने का एक सरल तरीका

2. कंसोल से जुड़े इंटरैक्टिव एक्सप्रेशन बनाना

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


क्रोम में इंटरएक्टिव एक्सप्रेशंस

3. धीमे इंटरनेट कनेक्शन का अनुकरण करें

Chrome डेवलपर टूल का Network टैब आपको विभिन्न नेटवर्क के लिए ब्राउज़र कनेक्शन का अनुकरण करने की अनुमति देता है। यह सुविधा उस स्थिति में पृष्ठ के व्यवहार का मूल्यांकन करने के लिए अत्यंत उपयोगी हो सकती है, जहां इसे लोड करने में कई सेकंड लगते हैं।


इंटरनेट से जुड़ने के विभिन्न तरीकों का अनुकरण करते हुए एक पृष्ठ की खोज

4. पृष्ठों के बीच स्विच करते समय लॉग को सहेजते हुए कैश को अक्षम करना

मुझे कई समस्याओं का सामना करना पड़ा, जैसा कि यह निकला, गलतियाँ नहीं थीं। उनका कारण कैश्ड कोड का गलत लोडिंग था। ऐसी परेशानियों से छुटकारा पाने के लिए, आप Network टैब की क्षमताओं का उपयोग करके कैशिंग को पूरी तरह से अक्षम कर सकते हैं। यह Disable cache चेकबॉक्स है। कृपया ध्यान दें कि कैश केवल तभी काम नहीं करता है जब डेवलपर टूलबार खुला हो।

लॉग को सहेजना एक अन्य उपयोगी विशेषता है, जिसके कारण जांच के तहत पृष्ठ को फिर से लोड किए जाने पर कंसोल को साफ़ नहीं किया जाता है। इस सुविधा को सक्षम करता है चेक बॉक्स Network टैब पर Preserve log को Preserve log ।


कैश अक्षम करना और लॉग सहेजना

5. स्क्रीनशॉट बनाना

क्रोम डेवलपर टूल में एक अंतर्निहित स्क्रीनशॉट टूल शामिल है। इसका उपयोग करने के लिए, आपको उपकरण विंडो खुली होने के साथ, कुंजी संयोजन Ctrl+Shift+P लागू करना होगा, और फिर दिखाई देने वाले क्षेत्र में कीवर्ड screenshot दर्ज करें और स्क्रीनशॉट बनाने की वांछित विधि का चयन करें।


डेवलपर टूलबार से स्क्रीनशॉट बनाना

6. कंसोल.लॉग () कमांड कंसोल को कुछ लॉग करने के एकमात्र तरीके से बहुत दूर है

डीबगिंग डेटा लॉग करने के लिए सभी लोग console.log() कमांड का उपयोग करते हैं। हालाँकि, यह कमांड लॉगिंग क्षमताओं को समाप्त नहीं करता है। विशेष रूप से, console.warn() और console.error() कमांड डेवलपर के निपटान में हैं।

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


Console.warn () और कंसोल .error ()

आप तालिका स्वरूप में संरचित कुछ संरचित डेटा को प्रदर्शित करने के लिए console.table() कमांड का उपयोग कर सकते हैं।


कमांड कंसोल। टेबल ()

कंसोल के साथ काम करने की संभावनाएं इन कमांडों तक सीमित नहीं हैं। उदाहरण के लिए, इसमें भी console.assert() और console.group() जैसी कमांड हैं। यहां आप ऐसी टीमों के बारे में एक विस्तृत कहानी पा सकते हैं।

7. $ _ निर्माण सबसे हाल ही में गणना की गई अभिव्यक्ति देता है

$_ निर्माण का उपयोग कंसोल में किए गए पिछले ऑपरेशन के मूल्य को वापस करने के लिए किया जा सकता है।


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

8. $ () कमांड document.querySelector () के लिए एक शॉर्टहैंड है

आप आइटम को जल्दी से चुनने के लिए कंसोल में $() कमांड का उपयोग कर सकते हैं। यहां jQuery की विशेषताएं, वैसे, लागू नहीं होती हैं, हालांकि पहली नज़र में ऐसा लग सकता है कि ऐसा नहीं है।

इसी तरह, $$() कमांड document.querySelectorAll() लिए एक शॉर्टहैंड है।


$ का उपयोग करना ()

9. शैलियाँ पैनल में तत्व स्थिति, जैसे होवर या फ़ोकस को सक्षम करना

यदि किसी तत्व के अध्ययन के दौरान hover अवस्था में उसके व्यवहार का अध्ययन करना आवश्यक है, तो यह एक कठिन कार्य हो सकता है, क्योंकि इस अवस्था में किसी तत्व का अनुवाद करने के लिए, उस पर माउस पॉइंटर लगाना आवश्यक होगा। इस समस्या के समाधान को Styles पैनल की क्षमताओं का लाभ उठाकर सुगम बनाया जा सकता है। यहां आप तत्वों को hover या focus जैसे राज्यों में स्थानांतरित करने के लिए बाध्य कर सकते हैं।


राज्य के लिए बल वस्तु

10. Ctrl कुंजी दबाने और माउस को क्लिक करने का संयोजन सीएसएस नियम परिभाषा खोजने में मदद करता है

क्या आपको कभी यह जानने की जरूरत है कि सीएसएस नियम का वर्णन कहां किया गया है? यह कार्य Ctrl कुंजी को Ctrl और आप के लिए ब्याज के नियम पर क्लिक करके हल करना बहुत आसान है। MacOS Ctrl बजाय Cmd का उपयोग करता है।


Ctrl + click - CSS नियम परिभाषा स्थान के लिए खोजें

प्रिय पाठकों! आप यहाँ Chrome डेवलपर टूल की अल्प-ज्ञात विशेषताओं की सूची में क्या जोड़ेंगे?