CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
किसी भी वेब पेज पर किसी भी तत्व के आकार, दूरी, मार्जिन और पैडिंग को मापें।
Image from store
Description from store
Screen Ruler वेब डेवलपर्स और डिज़ाइनर्स के लिए एक आदर्श साथी है जो अपनी वेबसाइटों के कार्यान्वयन को सत्यापित करना चाहते हैं। एक बार सक्रिय होने पर, Screen Ruler आपको किसी भी तत्व पर होवर करके आसानी से आकार, मार्जिन, पैडिंग, टैग नाम, IDs और क्लासेस देखने की अनुमति देता है। आप अन्य तत्वों के लिए दूरी मापने के लिए एक तत्व का चयन भी कर सकते हैं।
उपयोग
- एक्सटेंशन आइकन पर क्लिक करके, राइट-क्लिक कॉन्टेक्स्ट मेनू से "Screen Ruler" का चयन करके, या Alt/Option + Shift + R शॉर्टकट का उपयोग करके Screen Ruler को टॉगल करें।
- वेब पेजों पर तत्वों पर होवर करें ताकि उनके आकार, मार्जिन, पैडिंग, टैग नाम, IDs और क्लासेस प्रदर्शित हों।
- सीधे उस पर क्लिक करके एक तत्व का चयन करें, यह हाइलाइट को लाल बना देगा। डिसेलेक्ट करने के लिए, फिर से क्लिक करें, Escape दबाएं या एक अलग तत्व का चयन करें।
- किसी तत्व के पैरेंट का चयन करने के लिए, Alt/Option + Up का उपयोग करें, अपने चयन को पैरेंट तत्व में स्थानांतरित करें, अपने चयन को उलटने के लिए Alt/Option + Down का उपयोग करें।
- साइड पैनल में वर्तमान में चयनित तत्व के कंप्यूटेड CSS को देखें। वर्तमान में चयनित आइटम के कंप्यूटेड CSS को अपने क्लिपबोर्ड पर कॉपी करने के लिए "Copy CSS" बटन पर क्लिक करें।
सुविधाएं
- किसी भी तत्व का पिक्सेल आकार मापें।
- किसी भी दो तत्वों के बीच पिक्सेल दूरी मापें।
- HTML टैग नाम, क्लास नाम और IDs।
- पैरेंट/चाइल्ड चयन शॉर्टकट्स।
- रेस्पॉन्सिव चयन आपकी ब्राउज़र विंडो के साथ रीसाइज़ होते हैं।
- कॉन्टेक्स्ट मेनू से एक्सेस।
- कंप्यूटेड CSS निरीक्षण।
- CSS को क्लिपबोर्ड पर कॉपी करें।
- किसी भी वेब पेज पर काम करता है।
- chrome://extensions/shortcuts पर जाकर कीबोर्ड शॉर्टकट्स को कस्टमाइज़ करें।
Screen Ruler PRO
Screen Ruler एक PRO टियर भी प्रदान करता है जो अतिरिक्त सुविधाओं को अनलॉक करता है।
1. फ्लोटिंग इंस्पेक्टर: होवर करते समय विस्तृत तत्व गुण देखें, जिसमें स्थिति, आकार, रेंडर किया गया फ़ॉन्ट, रंग और बहुत कुछ शामिल है।
2. बॉक्स मॉडल विज़ुअलाइज़ेशन: मार्जिन, बॉर्डर, पैडिंग और कंटेंट डाइमेंशन दिखाने वाला बॉक्स मॉडल डायग्राम।
3. एनीमेशन विश्लेषण: CSS एनीमेशन टाइमिंग कर्व्स को विज़ुअलाइज़ करें और एनीमेशन CSS गुणों को कॉपी करें।
4. एसेट एक्सट्रैक्शन: किसी भी वेबपेज से सीधे इमेज, SVGs और वेक्टर एसेट्स को एक्सट्रैक्ट और डाउनलोड करें।
5. रंग निष्कर्षण: हेक्स, RGB और HSL वैल्यूज के साथ चयनित तत्वों से रंग पैलेट्स को एक्सट्रैक्ट और कॉपी करें।
6. लेआउट ग्रिड ओवरले: परफेक्ट डिज़ाइन अलाइनमेंट के लिए एक कस्टमाइज़ेबल लेआउट ग्रिड को ओवरले करें।
7. एलिमेंट स्क्रीनशॉट्स: Ctrl/Cmd + Shift + S का उपयोग करके चयनित तत्वों के क्रॉप किए गए स्क्रीनशॉट कैप्चर करें।
8. CSS सेलेक्टर सर्च: CSS सेलेक्टर्स का उपयोग करके तत्वों को खोजें और हाइलाइट करें।
9. एडवांस्ड साइड पैनल: कंप्यूटेड स्टाइल्स, बॉक्स मॉडल, रंग, एसेट्स और एनीमेशन सहित पूर्ण तत्व विश्लेषण।
Screen Ruler PRO को जीवनभर एक्सेस के लिए एक बार भुगतान की आवश्यकता होती है।
Screen Ruler बनाया गया है
- डेवलपर्स के लिए: लेआउट की समस्याओं को खोजना या अलाइनमेंट की समस्याओं की पहचान करना। चाहे आप मार्जिन और पैडिंग को ट्वीक कर रहे हों, या बस यह सुनिश्चित कर रहे हों कि सब कुछ सही तरीके से अलाइन हो, Screen Ruler आपकी विकास टूलकिट का एक अपरिहार्य अतिरिक्त बन जाता है।
- डिज़ाइनर्स के लिए: सुनिश्चित करें कि आपके डिज़ाइन को पिक्सेल-परफेक्ट सटीकता के साथ लागू किया गया है। Screen Ruler डिज़ाइन और विकास के बीच एक पुल के रूप में कार्य करता है, जिससे आप यह जांच सकते हैं कि हर तत्व बिल्कुल वैसे ही अलाइन है जैसा आपने चाहा था।
स्थापना
- Screen Ruler विशेष रूप से Google Chrome 116+ में स्थिरता के लिए डिज़ाइन किया गया है।
- Screen Ruler किसी भी Chromium ब्राउज़र पर इंस्टॉल करने योग्य है हालांकि, सबसे अच्छे अनुभव के लिए सुनिश्चित करें कि आपका ब्राउज़र सभी आवश्यक APIs (जैसे Side Panel और Offscreen) का समर्थन करता है। यदि इंस्टॉलेशन में कोई समस्या है, तो अपने ब्राउज़र को नवीनतम संस्करण में अपडेट करें और फिर से कोशिश करें।
Latest reviews
- (2025-08-05) André Cavallari: One of most useful front-end extensions, it worth each cent, had an issue with my activation but the author was pretty quick to answer and find a solution, so I recommend it to every developers.
- (2025-06-24) Victor Biletskiy: Alt/Option + Shift + R seems does not work to toggle via shortcut.. How to open and close extensions using hotkeys? So you don't have to click the mouse all the time
- (2025-06-13) Richard Brus: A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler.. An invaluable piece of my workflow when designing sites. Great job 10/10
- (2025-05-12) Misha Vs: This is the best on-screen roulette/ruler available in the Chrome Store, but it has recently stopped working in the Yandex Browser 😭 (I need to work in it from time to time)
- (2025-04-02) T VICKY: Love it
- (2025-03-03) Kelvin Ugbana: Perfect.. Works for me
- (2025-02-27) Fynn: Pretty good, but doesn't seem to display gap information unless it's in a grid/flex (which is the main information I want to view). It also doesn't allow you to scroll when active, so you have to toggle it off (and reopen the side panel, if you had it opened).
- (2025-02-11) R.c gamer: Great tool! I am a Web developer. It's really usefull for me.
- (2025-01-23) Muhammad Usman: love it 👍🏻
- (2024-11-29) Chikezie Iroegbu: Great tool! But after the last update, the side panel now opens every time. I should be able to toggle it off if I don't need it.
- (2024-11-28) Anna F.: Lovely! Just like Figma's rulers. Haven't used it much but seems to work exactly as expected so far. Thanks! UPDATE: recently the side panel started popping up by itself whenever I enable the extension! I don't want that! I'm using Brave browser and there's no easy way to remove the side panel. I have to switch to one of the Braves' panels and then minimize that to get rid of it. Can you please add an option to not enable the side panel whenever you enable the extension?
- (2024-09-24) Danny Feliz: I can't open the side panel using the floating menu; I only need to click the extension's context menu. I'm using the latest version of Chrome; it happens on all the sites.
- (2024-09-11) Ishan Shah: Side bar does not open. There should be a pause button next to the exit/stop button. I need to reopen it multiple times (although you can still use a shortcut.) the UI overall is nicely designed.
- (2024-09-10) Hashaam Ahmed: Nice, but the side panel doesnt popup on most of the sites using the navigation/bar below the screen, need to right click on the extension to view the side panel. Thank you.
- (2024-09-06) Patrik Gustavsson: Side panel doesn't work on Arc browser for me :( (using latest Mac OS)
- (2024-08-23) Levy Santa Ana: Not working
- (2024-08-21) Manuel Avella-Salazar: Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.
- (2024-08-07) Shane: Exactly what I was looking for. Excellent!
- (2024-07-25) Best Lay: Very Good
- (2024-06-17) Александр Ратманский: Nice!
- (2024-05-20) Walter Córdoba: ¡Fantastic!
- (2024-05-08) Dave Mejias: This extension is incredible... Do you have any contact info? I need help to buy pro.
- (2024-04-13) JaeHun Sim: Awesome