Screen Ruler - वेब को मापें और जाँचें

डिज़ाइनर्स और डेवलपर्स के लिए वेब इंस्पेक्टर। एलिमेंट्स मापें, CSS और रंग निकालें, स्क्रीनशॉट कैप्चर करें और भी बहुत कुछ।

Screen Ruler वेब डेवलपर्स और डिज़ाइनरों के लिए एकदम सही साथी है जो अपनी वेबसाइटों के कार्यान्वयन को मान्य करना चाहते हैं। एक बार सक्रिय होने के बाद, यह आपको किसी भी वेब सामग्री पर होवर करके उसके आकार, मार्जिन, पैडिंग, टैग नाम, आईडी और क्लास देखने की अनुमति देता है। आप अन्य तत्वों से दूरी मापने के लिए एक आइटम भी चुन सकते हैं। उपयोग - आइकन पर क्लिक करके, राइट-क्लिक संदर्भ मेनू से चुनकर, या शॉर्टकट `Alt/Option + Shift + R` का उपयोग करके एक्सटेंशन को टॉगल करें। - वेब पेजों पर आइटमों पर होवर करें ताकि उनके आकार, मार्जिन, पैडिंग, टैग नाम, आईडी और क्लास प्रदर्शित हो सकें। - किसी आइटम पर सीधे क्लिक करके उसे चुनें; इससे हाइलाइट लाल हो जाएगा। अचयनित करने के लिए, फिर से क्लिक करें, एस्केप दबाएं या कोई भिन्न आइटम चुनें। - मूल तत्व को चुनने के लिए, `Alt/Option + Up` का उपयोग करें। अपने चयन को उलटने के लिए `Alt/Option + Down` का उपयोग करें। - साइड पैनल में वर्तमान में चयनित आइटम का परिकलित CSS देखें। परिकलित CSS को अपने क्लिपबोर्ड पर कॉपी करने के लिए "Copy CSS" बटन पर क्लिक करें। विशेषताएँ - किसी भी तत्व का पिक्सेल आकार मापें। - किन्हीं दो तत्वों के बीच की पिक्सेल दूरी मापें। - HTML टैग नाम, क्लास नाम और आईडी। - मूल/बाल चयन शॉर्टकट। - प्रतिक्रियाशील चयन आपके ब्राउज़र विंडो के साथ आकार बदलते हैं। - संदर्भ मेनू से पहुंच। - परिकलित CSS निरीक्षण। - CSS को क्लिपबोर्ड पर कॉपी करें। - सटीक माप के लिए पेज रूलर (क्षैतिज और ऊर्ध्वाधर गाइड क्रॉसहेयर के साथ)। - पेज पर कहीं से भी रंगों का नमूना लेने और कॉपी करने के लिए रंग बीनने वाला टूल। - तत्व स्क्रीनशॉट: `Ctrl/Cmd + Shift + S` का उपयोग करके चयनित आइटमों के क्रॉप किए गए स्क्रीनशॉट कैप्चर करें। - अभिगम्यता मुद्दे: कार्रवाई योग्य सिफारिशों के साथ अपने चयन में WCAG कंट्रास्ट विफलताओं का स्वचालित रूप से पता लगाएं और उन्हें हाइलाइट करें। - किसी भी वेब पेज पर काम करता है। - `chrome://extensions/shortcuts` पर जाकर कीबोर्ड शॉर्टकट अनुकूलित करें। Screen Ruler PRO एक PRO टियर भी उपलब्ध है जो अतिरिक्त सुविधाएँ अनलॉक करता है। - फ्लोटिंग इंस्पेक्टर: होवर करते समय विस्तृत तत्व गुण देखें, जिसमें स्थिति, आकार, प्रस्तुत फ़ॉन्ट, रंग और बहुत कुछ शामिल है। - प्रतिक्रियाशील मोड: एक इंटरैक्टिव डिवाइस एमुलेटर और कस्टम आयामों के साथ विभिन्न डिवाइस व्यू पोर्ट पर अपने डिज़ाइनों का परीक्षण करें। - बॉक्स शैडो विज़ुअलाइज़ेशन: एक विस्फोटित दृश्य के साथ बहु-परत बॉक्स शैडो का इंटरैक्टिव विश्लेषण। - एनीमेशन विश्लेषण: CSS एनीमेशन टाइमिंग कर्व्स की कल्पना करें और एनीमेशन गुण कॉपी करें। - एसेट एक्सट्रैक्शन: छवियों, SVG और वेक्टर एसेट को निकालें और डाउनलोड करें। - रंग निष्कर्षण: हेक्स, RGB और HSL मानों के साथ चयनित सामग्री से रंग पट्टियाँ निकालें और कॉपी करें। - लेआउट ग्रिड ओवरले: सही डिज़ाइन संरेखण के लिए एक अनुकूलन योग्य लेआउट ग्रिड को ओवरले करें। - CSS चयनकर्ता खोज: CSS चयनकर्ताओं का उपयोग करके आइटम ढूंढें और हाइलाइट करें। - टाइपोग्राफी: अपने चयन में उपयोग की गई सभी टाइपोग्राफी शैलियों का विश्लेषण और निष्कर्षण करें। - एक्स-रे मोड: सभी सामग्री को रेखांकित करके पेज की अंतर्निहित संरचना को प्रकट करें। PRO के लिए आजीवन पहुंच के लिए एकमुश्त भुगतान की आवश्यकता होती है। इनके लिए बनाया गया - डेवलपर्स: लेआउट समस्याओं को पहचानें या संरेखण समस्याओं की पहचान करें। चाहे आप मार्जिन और पैडिंग को ठीक कर रहे हों, या बस यह सुनिश्चित कर रहे हों कि सब कुछ सही ढंग से संरेखित है, यह टूल आपके डेवलपमेंट टूलकिट में एक अनिवार्य जोड़ बन जाता है। - डिज़ाइनर: सुनिश्चित करें कि आपके डिज़ाइन पिक्सेल-परफेक्ट सटीकता के साथ कार्यान्वित किए गए हैं। यह डिज़ाइन और विकास के बीच एक पुल के रूप में कार्य करता है, जिससे आप जांच सकते हैं कि क्या प्रत्येक घटक ठीक उसी तरह संरेखित है जैसा आपने इरादा किया था। इंस्टॉलेशन - विशेष रूप से Google Chrome 116+ में स्थिरता के लिए डिज़ाइन किया गया। - किसी भी क्रोमियम ब्राउज़र पर इंस्टॉल करने योग्य; हालाँकि, सर्वोत्तम अनुभव के लिए, सुनिश्चित करें कि आपका ब्राउज़र सभी आवश्यक API (जैसे साइड पैनल और ऑफ़स्क्रीन) का समर्थन करता है। यदि इंस्टॉलेशन में कोई समस्या है, तो अपने ब्राउज़र को नवीनतम संस्करण में अपडेट करें और पुनः प्रयास करें।