क्रोम के लिए उत्तरदायी निरीक्षक उत्तरदायी डिजाइन के लिए एक महान शिक्षण उपकरण है

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

उत्तरदायी निरीक्षक URL बार के बगल में एक स्क्वायर बटन जोड़ता है जो एक पॉप-अप खोलता है। विस्तार आपको सभी स्क्रीन आकार दिखाता है जो वर्तमान में लोड की गई वेबसाइट बार के माध्यम से अनुकूलित है। स्क्रीन का आकार प्रत्येक पट्टी के अंत में लिखा गया है, और शीर्ष पर एक पिक्सेल स्केल आपको अलग-अलग स्क्रीन आकार दिखाता है। अपने माउस को स्केल पर ले जाएं और प्रत्येक अंशांकन लाइन के लिए, एक पॉप आपको स्क्रीन का आकार दिखाने के लिए दिखाई देगा। इसी पॉप-अप पर, रिसाइज़ बटन के साथ-साथ कैमरा बटन भी है। पूर्व पर क्लिक करने से स्वचालित रूप से आपकी ब्राउज़र विंडो उस चौड़ाई में बदल जाएगी। यदि आप चाहें, तो आप इसका स्क्रीनशॉट लेने के लिए कैमरा बटन पर क्लिक कर सकते हैं। स्क्रीनशॉट को आपके स्थानीय ड्राइव में सहेजा जा सकता है, या Behance.net पर अपलोड किया जा सकता है। यदि आपको महीन पिक्सेल पैमाने की आवश्यकता महसूस होती है, तो इसे बढ़ाने के लिए ज़ूम इन बटन पर क्लिक करें।

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

Chrome वेब स्टोर से उत्तरदायी निरीक्षक स्थापित करें