اندازهگیری فاصله به شما اجازه میدهد روی هر دو عنصر در یک صفحه وب کلیک کنید و فوراً فاصله دقیق پیکسلی بین آنها را ببینید — افقی (X)، عمودی (Y) و مورب. خطوط اتصال بصری با اندازهگیریهای برچسبدار بین عناصر ظاهر میشوند.
بررسی فاصله بین دو عنصر در DevTools مرورگر نیاز به hover روی هر عنصر جداگانه، خواندن مقادیر margin/padding و محاسبه ذهنی فاصله واقعی دارد. اندازهگیری فاصله این را کاملاً حذف میکند. روی عنصر A کلیک کنید، روی عنصر B کلیک کنید و فاصلههای دقیق پیکسلی فوراً نمایش داده میشوند.
روی عنصر اول کلیک کنید (با حاشیه آبی برجسته)، سپس روی عنصر دوم (با حاشیه سبز). فاصلههای بین bounding box آنها فوراً محاسبه و نمایش داده میشوند.
فاصله افقی (X)، عمودی (Y) و مورب را همزمان ببینید — هرکدام با خط اندازهگیری رنگبندیشده خود. X کهربایی، Y قرمز، مورب بنفش.
خطوط اندازهگیری خطچین دو عنصر انتخابشده را مستقیماً روی صفحه متصل میکنند، با برچسبهای فاصله در نقطه میانی هر خط.
هر عنصر انتخابشده ابعاد عرض × ارتفاع خود را در یک برچسب کوچک نشان میدهد. میتوانید هم اندازههای عنصر و هم فاصله بین آنها را در یک نما ببینید.
روی یک جفت عنصر جدید کلیک کنید تا اندازهگیریها فوراً بهروزرسانی شوند. نیازی به غیرفعال و فعالسازی مجدد ابزار نیست.
یک نوار اطلاعات ثابت در پایین viewport یک خلاصه فشرده نشان میدهد: نام و ابعاد هر دو عنصر، به علاوه همه سه مقدار فاصله.
mockup میگوید دکمه باید 24px زیر عنوان باشد. روی عنوان کلیک کنید، روی دکمه کلیک کنید و تأیید کنید فاصله Y دقیقاً 24px است.
فاصله بین کارت 1 و کارت 2، سپس بین کارت 2 و کارت 3 را اندازه بگیرید. اگر شکافها یکسان نیستند، یک ناسازگاری پیدا کردهاید.
فاصلههای عنصر را در عرض desktop اندازه بگیرید، سپس مرورگر را تغییر اندازه دهید و در عرض موبایل دوباره اندازه بگیرید.
اندازهگیریهای دقیق را در گزارشهای باگ وارد کنید: «شکاف بین nav و hero 47px است، باید 32px باشد.» مقادیر نوار اطلاعات میتوانند مستقیماً در ticket های Jira یا issue های GitHub کپی شوند.
روی دو عنصر که باید بهصورت افقی تراز باشند کلیک کنید. اگر فاصله Y صفر است، کاملاً تراز هستند. هر مقدار غیرصفر Y نشاندهنده ناتراز عمودی است.
داک شناور DevSuite Pro را باز کنید و روی آیکون اندازهگیری فاصله کلیک کنید. مکاننما به crosshair تغییر میکند.
روی هر عنصر در صفحه کلیک کنید. با حاشیه آبی برجسته شده و «عنصر A» با ابعادش برچسب میخورد.
روی عنصر دوم کلیک کنید. با حاشیه سبز برجسته شده و «عنصر B» برچسب میخورد. خطوط اندازهگیری فوراً ظاهر میشوند.
سه خط اندازهگیری ظاهر میشوند: افقی (X) کهربایی، عمودی (Y) قرمز و مورب بنفش. نوار اطلاعات در پایین همه مقادیر را خلاصه میکند.
روی جفت دیگری از عناصر کلیک کنید تا فاصله جدید فوراً اندازهگیری شود. وقتی تمام شد، آیکون اندازهگیری فاصله را در داک کلیک کنید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
