क्रोम डेवलपमेंट टूल्स ट्यूटोरियल, टिप्स, ट्रिक्स

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

क्रोम डेवलपमेंट टूल्स टिप्स

क्रोम देव की कई अज्ञात और छुपी हुई चाल हैं उपकरण और हम उनमें से सबसे उपयोगी चाल में देख रहे होंगे। क्रोम में डेवलपर टूल खोलने के लिए, अपने कीबोर्ड पर F12 दबाएं और निम्न चालों को आज़माएं।

1। किसी भी फ़ाइल को ढूंढें और खोलें

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

2। स्रोत फ़ाइल के भीतर खोजें

पिछली चाल में, हमें पता चला कि किसी विशेष फ़ाइल को कैसे खोजा जाए। आप सभी लोड की गई फ़ाइलों में एक विशेष स्ट्रिंग भी खोज सकते हैं। फ़ाइलों में एक स्ट्रिंग की खोज के लिए Ctrl + Shift + F दबाएं। यह नियमित अभिव्यक्तियों का भी समर्थन करता है।

3। विशेष पंक्ति पर जाएं

एक बार जब आप कोई स्रोत फ़ाइल खोल चुके हैं और विशेष लाइन पर जाना चाहते हैं, तो Ctrl + G दबाएं और लाइन नंबर दें और एंटर दबाएं।

4। कंसोल टैब में डीओएम तत्वों का चयन

देव उपकरण आपको कंसोल में तत्वों का चयन करने की अनुमति देता है।

• $ () - मिलान करने वाले सीएसएस चयनकर्ता की पहली घटना देता है।
• $$ () - यह दिए गए सीएसएस चयनकर्ता से मेल खाने वाले तत्वों की सरणी देता है।

अधिक कंसोल कमांड के लिए, इस पोस्ट पर जाएं।

5। कई कैरेट का उपयोग करें

कभी-कभी, आप अलग-अलग स्थानों पर एकाधिक कैरेट सेट करना चाहते हैं और आप Ctrl कुंजी दबाकर और जहां आप उन्हें रखना चाहते हैं, वहां क्लिक करके क्रोम देव टूल्स में आसानी से ऐसा कर सकते हैं। फिर लेखन शुरू करें और आप देखेंगे कि चयनित विभिन्न स्थानों पर रखा गया है।

6। लॉग संरक्षित करें

लॉग संरक्षित करें आपको लॉग को बनाए रखने में मदद करता है, यहां तक ​​कि पेज लोड हो जाता है। कंसोल लॉग में लॉग संरक्षित करें के बगल में स्थित विकल्प को चेक करें और लॉग संरक्षित है। यह अनलोड किए गए पृष्ठ से पहले लॉग को दिखाता है और बग की जांच करने में सहायक होता है।

7। अंतर्निहित कोड ब्यूटीफायर का उपयोग करें

क्रोम देव उपकरण में अंतर्निहित कोड ब्यूटीफायर है जिसे सुंदर प्रिंट "{}" कहा जाता है। डेवलपर टूल न्यूनतम कोड दिखाता है और पढ़ने के लिए इतना आसान नहीं है। मानव पठनीय प्रारूप में स्रोत फ़ाइल दिखाने के लिए, खुले स्रोत फ़ाइल पर नीचे बाईं ओर दिखाए गए सुंदर प्रिंट बटन पर क्लिक करें।

8। क्या आपकी वेबसाइट मोबाइल अनुकूल है? इसे यहां देखें

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

अधिक जानकारी के लिए, निम्न वीडियो देखें।

9। अनुकरण सेंसर और भौगोलिक स्थान

आप टच स्क्रीन और एक्सेलेरोमीटर जैसे सेंसर का अनुकरण भी कर सकते हैं। आप भौगोलिक स्थिति का अनुकरण भी कर सकते हैं। ऐसा करने के लिए, इम्यूलेशन -> सेंसर पर जाएं।

10। वर्तमान शब्द की अगली घटना का चयन करें

यदि आप इस शब्द की सभी घटनाओं को प्रतिस्थापित करना चाहते हैं, तो शब्द का चयन करें और चयनित शब्द की अगली घटना का चयन करने के लिए Ctrl + D दबाएं।, आप उस शब्द को एक शॉट में अपनी सभी घटनाओं में संपादित कर सकते हैं।

11। रंग प्रारूप बदलें

आरजीबीए, हेक्साडेसिमल और एचएसएल स्वरूपण के बीच परिवर्तन बदलने के लिए रंग पूर्वावलोकन पर बस Shift + क्लिक का उपयोग करें।

12। वर्कस्पेस

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

वर्कस्पेस पर अधिक जानकारी के लिए, Chrome.com पर जाएं।