Google Chrome वेब विकास के लिए लोकप्रिय वेब ब्राउज़र में से एक है, इसकी उन्नत सुविधाओं के कारण। क्रोम डेवलपर टूल्स डीबगिंग के दौरान बहुत उपयोगी हो सकता है। हम में से ज्यादातर पहले से ही जानते हैं कि हम क्रोम देव टूल्स का उपयोग कर लाइव सीएसएस को संपादित कर सकते हैं, लेकिन आज भी आपके साथ साझा करने वाली अधिक युक्तियां हैं।
क्रोम विकास उपकरण युक्तियाँ
क्रोम देव उपकरण की कई अज्ञात और छिपी हुई चालें हैं और हम उनमें से सबसे उपयोगी चालों को देख रहे होंगे। क्रोम में डेवलपर टूल्स खोलने के लिए, दबाएं F12 अपने कीबोर्ड पर और निम्न चाल का प्रयास करें।
1. किसी भी फाइल को ढूंढें और खोलें
जब हम वेब विकास कर रहे हैं तो हम कई एचटीएमएल, सीएसएस, जेएस और अन्य फाइलों से निपटते हैं। जब हम कुछ भी डीबग करना चाहते हैं, तो हम क्रोम देव टूल्स खोलते हैं। आप अपनी नौकरी को आसान बनाने के लिए त्वरित फ़ाइल को खोज और ढूंढ सकते हैं। बस, दबाएं Ctrl + P और फ़ाइल नाम टाइप करना शुरू करें। यह आपको फ़ाइलों की सूची से विशेष फ़ाइल खोजने में मदद करता है।
2. स्रोत फ़ाइल के भीतर खोजें
पिछली चाल में, हमें पता चला कि किसी विशेष फ़ाइल को कैसे खोजा जाए। आप सभी लोड की गई फ़ाइलों में एक विशेष स्ट्रिंग भी खोज सकते हैं। दबाएँ Ctrl + Shift + F फ़ाइलों में एक स्ट्रिंग के लिए खोज करने के लिए। यह नियमित अभिव्यक्तियों का भी समर्थन करता है।
3. विशेष लाइन पर जाएं
एक बार जब आप कोई स्रोत फ़ाइल खोल चुके हैं और विशेष लाइन पर जाना चाहते हैं, तो दबाएं Ctrl + G और लाइन नंबर दें और एंटर दबाएं।
4. कंसोल टैब में डोम तत्वों का चयन करना
देव उपकरण आपको कंसोल में तत्वों का चयन करने की अनुमति देता है।
- $() – मिलान सीएसएस चयनकर्ता की पहली घटना देता है।
- $$() – यह दिए गए सीएसएस चयनकर्ता से मेल खाने वाले तत्वों की सरणी देता है।
5. एकाधिक कैरेट का उपयोग करें
कभी-कभी, आप अलग-अलग स्थानों पर एकाधिक कैरेट सेट करना चाहते हैं और आप इसे आसानी से क्रोम देव टूल्स में आसानी से कर सकते हैं Ctrl कुंजी और क्लिक करें जहां आप उन्हें रखना चाहते हैं। फिर लेखन शुरू करें और आप देखेंगे कि चयनित विभिन्न स्थानों पर रखा गया है।
6. लॉग संरक्षित करें
लॉग संरक्षित करने से आपको लॉग को बनाए रखने में मदद मिलती है, यहां तक कि पेज लोड होता है। बगल में विकल्प की जांच करें लॉग संरक्षित करें कंसोल लॉग में और लॉग संरक्षित है। यह अनलोड किए गए पृष्ठ से पहले लॉग को दिखाता है और बग की जांच करने में सहायक होता है।
7. अंतर्निहित कोड beautifier का उपयोग करें
क्रोम देव टूल्स में अंतर्निहित कोड ब्यूटीफायर है सुंदर प्रिंट "{}"। डेवलपर टूल कम से कम कोड दिखाता है और पढ़ने के लिए इतना आसान नहीं है। मानव पठनीय प्रारूप में स्रोत फ़ाइल दिखाने के लिए, खुले स्रोत फ़ाइल पर नीचे बाईं ओर दिखाए गए सुंदर प्रिंट बटन पर क्लिक करें।
8. क्या आपकी वेबसाइट मोबाइल अनुकूल है? इसे यहां देखें
क्रोम देव उपकरण हमें यह भी जांचने की अनुमति देता है कि कोई वेबसाइट मोबाइल अनुकूल है या नहीं। आप जांच सकते हैं कि आपकी वेबसाइट विभिन्न उपकरणों पर कैसी दिखती है। क्रोम देव उपकरण और नीचे के लिए सिर अनुकरण टैब, आप विभिन्न उपकरणों को फाइल कर सकते हैं। इच्छित डिवाइस का चयन करें और जांचें कि आपकी डिवाइस उस डिवाइस में कैसी दिखती है।
9. अनुकरण सेंसर और भौगोलिक स्थान
आप टच स्क्रीन और एक्सेलेरोमीटर जैसे सेंसर का अनुकरण भी कर सकते हैं। आप भौगोलिक स्थिति का अनुकरण भी कर सकते हैं। ऐसा करने के लिए, ऊपर सिर इम्यूलेशन -> सेंसर।
10. वर्तमान शब्द की अगली घटना का चयन करें
यदि आप इस शब्द की सभी घटनाओं को प्रतिस्थापित करना चाहते हैं, तो शब्द का चयन करें और दबाएं Ctrl + D चयनित शब्द की अगली घटना का चयन करने के लिए।, आप उस शब्द को एक शॉट में अपनी सभी घटनाओं में संपादित कर सकते हैं।
11. रंग प्रारूप बदलें
महज प्रयोग करें Shift + क्लिक करें आरजीबीए, हेक्साडेसिमल और एचएसएल स्वरूपण के बीच परिवर्तन बदलने के लिए रंग पूर्वावलोकन पर।
12. कार्यक्षेत्र के माध्यम से स्थानीय फ़ाइलों में परिवर्तन जोड़ें
हम स्रोत फ़ाइलों को संपादित करने और सीएसएस, जावा स्क्रिप्ट और क्रोम देव उपकरण में अन्य फ़ाइलों में कुछ बदलाव करने में सक्षम हैं। स्थानीय फ़ाइलों में इन परिवर्तनों को जोड़ने के लिए, डिस्क पर फ़ाइलों को कार्यक्षेत्र में परिवर्तन पेस्ट करने की आवश्यकता नहीं है। क्रोम देव उपकरण आपको फ़ाइलों से मेल खाने और स्थानीय उपकरणों को देव उपकरण में किए गए परिवर्तनों के साथ अपडेट करने की अनुमति देते हैं। ऐसा करने के लिए बाईं तरफ स्रोत फ़ाइल पर राइट क्लिक करें सूत्रों का कहना है टैब और चयन करें वर्कस्पेस में फ़ोल्डर जोड़ें।
वर्कस्पेस पर अधिक जानकारी के लिए, Chrome.com पर जाएं।
