Mesafeyi Ölç, bir web sayfasındaki herhangi iki öğeye tıklayarak aralarındaki tam piksel mesafesini anında görmenizi sağlar — yatay (X), dikey (Y) ve diyagonal olarak. Etiketli ölçümlere sahip görsel bağlantı çizgileri öğeler arasında görünür ve bir bilgi çubuğu her iki öğenin boyutlarını ve üç yöndeki mesafeleri gösterir.
Tarayıcı DevTools'ta iki öğe arasındaki boşluğu kontrol etmek, her öğenin üzerine ayrı ayrı gelmeyi, kenar boşluğu/dolgu değerlerini okumayı ve gerçek görsel mesafeyi hesaplamak için zihinsel matematik yapmayı gerektirir. Mesafeyi Ölç bunu tamamen ortadan kaldırır. A Öğesine tıklayın, B Öğesine tıklayın ve tam piksel mesafeleri anında görünür — X (yatay), Y (dikey) ve diyagonal — iki öğeyi doğrudan sayfada bağlayan etiketli çizgiler olarak görüntülenir. Araç öğe kenarlarından (sınırlayıcı kutular) ölçer, bu nedenle değerler kullanıcının gördüğü öğeler arasındaki gerçek görsel boşluğu temsil eder. Bu, birden fazla boşluk özelliğinin kümülatif etkisini hesaba katmayan margin/padding değerlerini okumaktan farklıdır. Her seçili öğe renkli bir kenarlıkla vurgulanır ve kendi boyutlarını (genişlik × yükseklik) gösterir, böylece hem öğe boyutlarını hem de aralarındaki boşluğu tek bir görünümde görebilirsiniz.
İlk öğeye (mavi bir kenarlıkla vurgulanır), ardından ikinci öğeye (yeşil bir kenarlıkla vurgulanır) tıklayın. Sınırlayıcı kutuları arasındaki mesafeler anında hesaplanır ve görüntülenir. Sürükleme yok, manuel giriş yok — sadece iki tıklama.
Yatay mesafeyi (X), dikey mesafeyi (Y) ve diyagonal mesafeyi aynı anda görün — her biri kendi renk kodlu ölçüm çizgisi ve etiketiyle görüntülenir. X kehribar, Y kırmızı, diyagonal mor renktedir.
Kesik çizgili ölçüm çizgileri seçili iki öğeyi doğrudan sayfada birbirine bağlar ve her çizginin orta noktasına mesafe etiketleri yerleştirilir. Görsel temsil, neyin ölçüldüğünü anında netleştirir.
Her seçili öğe küçük bir etikette kendi genişlik × yükseklik boyutlarını gösterir. Bu, araç değiştirmeden aynı görünümde hem öğe boyutlarını hem de aralarındaki boşluğu görmenizi sağlar.
Ölçümleri anında güncellemek için yeni bir öğe çifti seçin. Aracı devre dışı bırakıp yeniden etkinleştirmeye gerek yok. Önceki ölçüm çizgileri yeni öğe çifti için yenileriyle değiştirilir.
Görüntü alanının altındaki kalıcı bir bilgi çubuğu kompakt bir özet gösterir: her iki öğenin adları ve boyutları artı üç mesafe değeri (X, Y, diyagonal). Hata raporlarına veya tasarım geri bildirimine yapıştırmak için kopyalama dostu.
Maket düğmenin başlığın 24px altında olması gerektiğini söylüyor. Başlığa tıklayın, düğmeye tıklayın ve Y mesafesinin tam olarak 24px olduğunu onaylayın. Göze görünmeyen ancak tasarım belirteçlerinde belirtilen ince boşluk tutarsızlıklarını yakalar.
Kart 1 ve Kart 2 arasındaki mesafeyi ölçün, ardından Kart 2 ve Kart 3 arasındaki mesafeyi ölçün. Boşluklar aynı değilse, bir tutarsızlık buldunuz — muhtemelen farklı kenar boşluklarından veya bir flexbox aralık sorunundan kaynaklanıyor.
Öğe mesafelerini masaüstü genişliğinde ölçün, ardından tarayıcıyı yeniden boyutlandırın ve mobil genişliğinde tekrar ölçün. Boşluğun kesme noktaları arasında doğru şekilde ölçeklendiğini ve duyarlı kenar boşluğu/dolgu ayarlamalarının tasarlandığı gibi çalıştığını doğrulayın.
Hata raporlarınıza kesin ölçümleri dahil edin: "Nav ve kahraman arasındaki boşluk 47px, tasarım belirtimine göre 32px olmalıydı." Bilgi çubuğu değerleri doğrudan Jira biletlerine veya GitHub sorunlarına kopyalanabilir.
Yatay olarak hizalanması gereken iki öğeye tıklayın. Y mesafesi 0px ise mükemmel şekilde hizalanırlar. Sıfır olmayan herhangi bir Y değeri dikey bir yanlış hizalamayı gösterir — tam sayı kaç piksel yanlış olduğunu söyler.
DevSuite Pro yüzen yuvasını açın ve Mesafeyi Ölç simgesine tıklayın. İmleç bir artı işaretine dönüşür ve bu, ilk öğeyi seçebileceğinizi gösterir.
Sayfadaki herhangi bir öğeye tıklayın. Mavi bir kenarlıkla vurgulanır ve boyutları (piksel cinsinden genişlik × yükseklik) ile "Öğe A" olarak etiketlenir.
İkinci bir öğeye tıklayın. Yeşil bir kenarlıkla vurgulanır ve "Öğe B" olarak etiketlenir. İki öğeyi bağlayan ölçüm çizgileri anında belirir.
Üç ölçüm çizgisi belirir: kehribar renkli yatay (X), kırmızı dikey (Y) ve mor diyagonal. Her çizginin piksel mesafesini gösteren bir etiketi vardır. Alttaki bilgi çubuğu tüm değerleri özetler.
Yeni bir mesafeyi anında ölçmek için başka bir öğe çiftine tıklayın. Bittiğinde aracı devre dışı bırakmak için yuvadaki Mesafeyi Ölç simgesine tıklayın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
