CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
किसी भी वेबपेज पर पिक्सेल-परफेक्ट दूरी और ग्रिड मापें।
Image from store
Description from store
पिक्सेल सटीकता बेहतरीन डिज़ाइन का शांत नायक है। एक सिंगल-पिक्सल मिस-अलाइनमेंट ग्रिड की लय को तोड़ सकता है, टेक्स्ट को ऑफ-सेंटर महसूस करा सकता है, या पूरे घटक को "लगभग सही" दिखने का कारण बन सकता है, लेकिन बिल्कुल नहीं। ग्रिड रूलर लाइट फ्रंट-एंड डेवलपर्स, UI/UX डिज़ाइनर, QA टेस्टर और विज़ुअल पॉलिश की परवाह करने वाले किसी भी व्यक्ति को एक त्वरित, इन-ब्राउज़र माप टूलकिट देता है - कोई भारी-भरकम डिज़ाइन सॉफ़्टवेयर नहीं, कोई अव्यवस्थित DevTools पैनल नहीं, और कोई स्क्रीनशॉट बाहरी ऐप्स में नहीं भेजा जाता। एक क्लिक के साथ एक्सटेंशन किसी भी वेबपेज के शीर्ष पर एक आकार बदलने योग्य रूलर, स्नैप-टू-ग्रिड गाइड और वैकल्पिक बेसलाइन ग्रिड को ओवरले करता है ताकि आप स्पेसिंग की जांच कर सकें, 8-पॉइंट ग्रिड को सत्यापित कर सकें और सेकंड में लेआउट बग के सबूत कैप्चर कर सकें।
ग्रिड रूलर लाइट को क्या अलग बनाता है?
एक-क्लिक सक्रियण, एक-क्लिक बर्खास्तगी
टूलबार आइकन पर क्लिक करें (या ब्राउज़र कीबोर्ड सेटिंग में आपके द्वारा सेट किए गए शॉर्टकट को लागू करें) और एक्सटेंशन एक हल्का संस्करण इंजेक्ट करता है<canvas> ओवरले अपने स्वयं के शैडो-डोम में समाहित है। आपके पृष्ठ का सीएसएस हस्तक्षेप नहीं कर सकता है, और ओवरले कभी भी उस DOM ट्री को नहीं बदलता है जिसका आप परीक्षण कर रहे हैं। फिर से क्लिक करें और हर गाइड, ग्रिड और लेबल गायब हो जाता है - कोई पेज रीलोड नहीं होता, कोई भी इवेंट श्रोता नहीं रहता।
आप इसे अपने टूलकिट में क्यों रखना चाहेंगे
समय की बचत करें: DevTools में पैडिंग को मापने के लिए नेस्टेड बॉक्स में ड्रिलिंग करने और मानसिक रूप से बॉर्डर और मार्जिन मान जोड़ने की आवश्यकता होती है। ग्रिड रूलर लाइट एक ड्रैग में दूरियों को दृश्यमान रूप से दिखाता है।
बग्स को कम करें: स्टेजिंग या इससे भी बदतर, उत्पादन तक पहुंचने से पहले छोटे स्पेसिंग रिग्रेशन को पकड़ें - विशेष रूप से रिस्पॉन्सिव ब्रेक-पॉइंट्स में जहां QA की नजर हमेशा नहीं पड़ती।
सहयोग में सुधार: डिजाइनर 8-बिंदु ग्रिड को सीधे एक तैनात बिल्ड पर ओवरले कर सकते हैं और स्क्रीनशॉट साझा कर सकते हैं, जिससे डेवलपर्स को फिग्मा टिप्पणियों के बिना सटीक पिक्सेल फीडबैक मिल सकता है।
ध्यान केंद्रित रखें: किसी बटन को मापने के लिए फ़ोटोशॉप में ऑल्ट-टैबिंग या स्केच फ़ाइल खोलने की ज़रूरत नहीं है। सब कुछ लाइव पेज पर होता है, बिल्कुल वैसे ही जैसे अंतिम उपयोगकर्ता इसे देखते हैं।
शिक्षित करें और दस्तावेज तैयार करें: उत्पाद प्रबंधक और तकनीकी लेखक रूलर स्क्रीनशॉट के साथ लेआउट व्यवहार का प्रदर्शन कर सकते हैं, जिससे सभी हितधारकों के लिए विनिर्देश दस्तावेज अधिक स्पष्ट हो जाते हैं।
लक्षित उपयोगकर्ता समूह
यूजर ग्रुप
फ्रंट-एंड डेवलपर्स
सीएसएस स्पेसिंग, फ्लेक्सबॉक्स गैप और ब्रेक-पॉइंट्स पर घटक संरेखण को सत्यापित करने की आवश्यकता है, शासकों को खींचें, किनारों पर स्नैप करें, गाइड लॉक करें, पीआर समीक्षा के लिए स्क्रीनशॉट निर्यात करें
यूआई/यूएक्स डिजाइनर
यह पुष्टि करनी होगी कि डेव बिल्ड 8-पॉइंट या 10-पॉइंट डिज़ाइन सिस्टम का सम्मान करते हैं बेसलाइन ग्रिड ओवरले करें, पैडिंग को मापें, एनोटेट किए गए PNG को साझा करें
क्यूए परीक्षक
स्पष्ट प्रमाण के साथ पिक्सेल-परफेक्ट बग की रिपोर्ट करें
त्वरित माप और एक-कुंजी स्क्रीनशॉट कैप्चर सीधे बग ट्रैकर्स में चले जाते हैं
सामग्री संपादक और पीएम
CMS-संचालित पृष्ठों पर हेडलाइन रैप, विज्ञापन स्लॉट स्पेसिंग और कार्ड लेआउट की जाँच करें गैर-तकनीकी ओवरले DevTools जटिलता से बचाता है
शिक्षक एवं छात्र
ब्राउज़र में डिज़ाइन सिद्धांत, ग्रिड सिद्धांत और उत्तरदायी लेआउट सिखाएँ बाहरी उपकरणों के बिना दृश्य, वास्तविक समय प्रदर्शन