CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Herhangi bir web sayfasında piksel mükemmelliğinde mesafeleri ve ızgaraları ölçün.
Image from store
Description from store
Piksel doğruluğu, harika tasarımın sessiz kahramanıdır. Tek bir piksel yanlış hizalama, bir ızgaranın ritmini bozabilir, metnin merkezden uzak hissettirmesine veya tüm bir bileşenin "neredeyse doğru" görünmesine neden olabilir, ancak tam olarak doğru değil. Grid Ruler Lite, ön uç geliştiricilere, UI/UX tasarımcılarına, QA test uzmanlarına ve görsel cilalamaya önem veren herkese anında, tarayıcı içi bir ölçüm araç takımı sunar; ağır tasarım yazılımları, karmaşık DevTools panelleri ve harici uygulamalara karıştırılmış ekran görüntüleri yok. Tek bir tıklamayla uzantı, herhangi bir web sayfasının üstüne yeniden boyutlandırılabilir bir cetvel, ızgaraya hizalama kılavuzları ve isteğe bağlı temel çizgi ızgaraları yerleştirir, böylece aralığı kontrol edebilir, 8 noktalı ızgaraları doğrulayabilir ve düzen hatalarının kanıtlarını saniyeler içinde yakalayabilirsiniz.
Grid Ruler Lite'ı Farklı Kılan Nedir?
Tek Tıkla Etkinleştirme, Tek Tıkla İptal
Araç çubuğu simgesine tıklayın (veya tarayıcı klavye ayarlarında ayarladığınız kısayolu çağırın) ve uzantı hafif bir<canvas> kendi Shadow-DOM'unda kapsüllenmiş kaplama. Sayfanızın CSS'si müdahale edemez ve kaplama test ettiğiniz DOM ağacını asla değiştirmez. Tekrar tıklayın ve her kılavuz, ızgara ve etiket kaybolur—sayfa yeniden yüklemesi yok, kalan olay dinleyicileri yok.
Neden Bunu Araç Çantanızda İsteyeceksiniz
Zamandan Tasarruf Edin: DevTools'da dolguları ölçmek, iç içe geçmiş kutulara delmeyi ve zihinsel olarak kenarlık ve kenar boşluğu değerleri eklemeyi gerektirir. Grid Ruler Lite, mesafeleri tek bir sürüklemede görsel olarak gösterir.
Hataları Azaltın: Küçük aralık gerilemelerini, sahneleme aşamasına veya daha kötüsü üretim aşamasına ulaşmadan önce yakalayın; özellikle QA gözlerinin her zaman odaklanmadığı duyarlı kesme noktalarında.
İşbirliğini Geliştirin: Tasarımcılar, dağıtılan bir yapının üzerine 8 noktalı ızgarayı doğrudan yerleştirebilir ve bir ekran görüntüsü paylaşabilir; böylece geliştiricilere Figma yorumları olmadan tam piksel geri bildirimi sağlanabilir.
Odaklanın: Photoshop'ta alt-tab'e basmaya veya sadece bir düğmeyi ölçmek için Sketch dosyalarını açmaya gerek yok. Her şey canlı sayfada, tam olarak son kullanıcıların gördüğü gibi gerçekleşir.
Eğitin ve Belgeleyin: Ürün yöneticileri ve teknik yazarlar, cetvel ekran görüntüleriyle düzen davranışını gösterebilir ve böylece teknik özellik belgelerini tüm paydaşlar için daha anlaşılır hale getirebilirler.
Hedef Kullanıcı Grupları
Kullanıcı Grubu
Ön Uç Geliştiriciler
Kesme noktaları arasında CSS aralığını, esnek kutu boşluklarını ve bileşen hizalamasını doğrulamanız gerekir Cetvelleri sürükleyin, kenarlara yaslayın, kılavuzları kilitleyin, PR incelemeleri için ekran görüntülerini dışa aktarın
UI/UX Tasarımcıları
Geliştirici yapılarının 8 veya 10 noktalı tasarım sistemlerine saygı gösterdiğini teyit etmelisiniz. Temel çizgi ızgaralarını üst üste koyun, dolguları ölçün, açıklamalı PNG'leri paylaşın
QA Test Uzmanları
Piksel mükemmelliğindeki hataları net kanıtlarla bildirin
Hızlı ölçümler ve tek tuşla ekran görüntüsü yakalama doğrudan hata izleyicilere aktarılır
İçerik Editörleri ve PM'ler
CMS tarafından yönetilen sayfalarda başlık sarma, reklam yuvası aralığı ve kart düzenlerini kontrol edin Teknik olmayan kaplama, DevTools karmaşıklığını önler
Eğitimciler ve Öğrenciler
Tasarım ilkelerini, ızgara teorisini ve duyarlı düzenleri tarayıcıda canlı olarak öğretin. Harici araçlar olmadan görsel, gerçek zamanlı gösteriler