Web tasarım ve front-end geliştirme süreçlerinde “piksel hassasiyetinde ölçüm” her zaman kritik bir adımdır. Bir öğenin genişliği tam kaç piksel? İki bileşen arasındaki boşluk gerçekten aynı mı? Adbear Page Ruler, bu sorulara saniyeler içinde yanıt vermek için tasarlandı. Tek görevi; web sayfalarında öğeler arasındaki mesafeleri ve boyutları ölçebileceğiniz temiz, geçici bir cetvel/ölçüm katmanı sunmak. Etkinleştirildiğinde sayfanıza hafif bir ölçüm arayüzü eklenir, kapattığınız anda iz bırakmadan tamamen kaldırılır. Reklam yok, izleme yok, veri toplama yok.
Kimin İçin?
- UI/UX tasarımcıları: Piksel hatalarını tespit etmek, grid ve spacing tutarlılığını denetlemek.
- Front-end geliştiriciler: BEM/utility sınıflarının çıktısını doğrulamak, responsive kırılımlarda elementler arası mesafe ölçme ihtiyacını hızla çözmek.
- QA ekipleri: Tasarım–kod karşılaştırmasında piksel ruler ile farkları net görmek.
- Eğitmenler ve öğrenciler: CSS kutu modeli ve layout mantığını pratikte öğrenmek.
Öne Çıkan Özellikler
- Piksel hassasiyetinde ölçüm: Genişlik, yükseklik ve X–Y koordinatlarını anlık görün.
- Element hedefleme: İmleci bir öğenin üzerine getirip tek tıklamayla o elemana göre padding/margin aralıklarını okuyun.
- Serbest çizim ölçümü: Sayfanın herhangi iki noktası arasını kılavuz çizgilerle ölçün.
- Akıllı hizalama kılavuzları: Başka öğelerin kenarlarına yaklaştığınızda otomatik hizalama çizgileri belirir.
- Geçici ve hafif: Etkinleştir–ölç–kapat. DOM’a kalıcı müdahale yok, performans kaybı yok.
- Karanlık/açık içerikle uyumlu kontrast: Ölçüm overlay’i içerikle çakışmadan net görünür.
Adbear Page Ruler yalnızca ölçüm yapar. Herhangi bir kullanıcı verisi toplamaz, üçüncü tarafla paylaşmaz ve reklam içermez.
Neden Adbear Page Ruler?
- Hız: DevTools arasında kaybolmadan, tek tıkla ölçüme başlarsınız.
- Doğruluk: Görsel tahmin yerine, piksel bazlı net değerler.
- Sadelik: Sadece ihtiyacınız olanı yapar; fazlalık yok.
- Güven: Veri gizliliği ve reklamsız deneyim temel ilkedir.
Kurulum ve İlk Kullanım (Chrome)
- Chrome Web Mağazası’ndan “Adbear Page Ruler” sayfasını açın.
- “Ekle” butonuyla uzantıyı tarayıcınıza kurun.
- Araç çubuğundaki Adbear Page Ruler simgesine tıklayın ve ölçüme başlayın.
- Ölçüm bittiğinde aynı simgeye tekrar tıklayarak overlay’i kapatın.
Not: İsterseniz uzantıyı araç çubuğunda sabitleyerek tek tıkla erişim sağlayabilirsiniz.
Nasıl Ölçersiniz?
- Bir öğeyi seçin: İmleci öğenin üzerine getirin → çerçeve, boyut ve konum değerleri belirsin.
- İki nokta arası mesafe: Başlangıç noktasına tıklayın, imleci hedefe taşıyın → yatay/dikey piksel farkını görün.
- Okunabilirlik: Kılavuz çizgileri ve etiketler ekranı kalabalıklaştırmadan ölçümü netleştirir.
Performans ve Gizlilik
- Sıfır veri toplama: Çerez yok, telemetri yok, üçüncü taraf SDK yok.
- Hafif çalışma: Ölçüm arayüzü yalnızca etkinleştirildiğinde yüklenir, kapandığında DOM’dan kaldırılır.
- Uyumluluk: Modern tarayıcı motorlarında içerik katmanlarıyla çakışmayı önleyecek şekilde optimize edilmiştir.
Kullanım Senaryoları
- Spacing tutarlılığı: Tasarım sisteminizde “8px grid” kullanıyorsanız, spacing denetimini kolaylaştırır.
- Responsive kontrol: Breakpoint’lerde bileşenlerin genişlik/yükseklik değişimini doğrulayın.
- Banner/Landing sayfası testi: Katmanların hizasını, hero alanı yüksekliğini piksel ruler ile netleştirin.
- Bileşen kütüphanesi QA: Kart, modal, tooltip gibi bileşenlerde padding/margin standartlarını kontrol edin
İpuçları
- Z-index sorunlarında: İçerik üzerinde görünmezse sayfayı yenileyip tekrar etkinleştirin.
- Sık kullanılan sayfalarda: Uzantı simgesini araç çubuğuna sabitleyin.
- Ekran görüntüsü workflow’u: Ölçüm açıkken bir ekran görüntüsü alıp ekip içinde farkları somutlaştırın.
SSS
Adbear Page Ruler ücretli mi?
Hayır. Reklam ve izleme olmadan ücretsiz bir ölçüm deneyimi sunar.
Hangi veriler toplanır?
Hiçbiri. Uzantı kullanıcı verisi toplamaz, sunucuya veri göndermez.
Her sitede çalışır mı?
Çoğu sitede evet. Aşırı agresif güvenlik katmanları veya özel canvas overlay’leri olan sayfalarda kısıtlı görünebilir; bu durumda sayfayı yenileyip tekrar deneyin.
Firefox/Edge desteği var mı?
Chromium tabanlı tarayıcılarda çalışır. Diğer mağazalar için planlar yol haritasına göre değerlendirilecektir.
Sonuç: Piksel Doğruluğa Giden En Kısa Yol
Adbear Page Ruler, tasarım ve geliştirme arasında köprü kuran hafif, güvenli ve odaklı bir Chrome ölçüm eklentisidir. Sadece işini yapar: ölçer. Bu kadar basit.
Hemen deneyin ve web sayfalarındaki ölçüm işlerinizi saniyelere indirin.
İndir & Deneyin
Destek Sekmesi: https://chromewebstore.google.com/detail/gimajdcdenbjafagifedkaahhncjjjjk/support
Chrome Web Store: AdBear Page Ruler
Destek E-posta: hello@adbeardigital.com