تتيح لك أداة قياس المسافة النقر فوق أي عنصرين على صفحة الويب ورؤية المسافة الدقيقة بينهما بالبكسل على الفور — أفقيًا (X) وعموديًا (Y) وقطريًا. تظهر خطوط اتصال مرئية مع قياسات مسماة بين العناصر، ويعرض شريط المعلومات أبعاد كلا العنصرين والمسافات في جميع الاتجاهات الثلاثة.
يتطلب التحقق من التباعد بين عنصرين في DevTools في المتصفح تمرير الماوس فوق كل عنصر على حدة، وقراءة قيم الهامش/الحشو، وإجراء حسابات ذهنية لحساب المسافة المرئية الفعلية. أداة قياس المسافة تلغي ذلك تمامًا. انقر فوق العنصر (أ)، وانقر فوق العنصر (ب)، وتظهر مسافات البكسل الدقيقة على الفور — X (أفقي) و Y (عمودي) والقطري — معروضة كخطوط مسماة تصل بين العنصرين مباشرة على الصفحة. تقيس الأداة من حواف العناصر (المربعات المحيطة)، بحيث تمثل القيم الفجوة المرئية الفعلية بين العناصر كما يراها المستخدم. يختلف هذا عن قراءة قيم الهامش/الحشو، والتي لا تأخذ في الاعتبار التأثير التراكمي لخصائص التباعد المتعددة. يتم تمييز كل عنصر محدد بحدود ملونة ويعرض أبعاده الخاصة (العرض × الارتفاع)، بحيث يمكنك رؤية أحجام العناصر والتباعد بينها في عرض واحد.
انقر فوق العنصر الأول (المظلل بحد أزرق)، ثم انقر فوق العنصر الثاني (المظلل بحد أخضر). يتم حساب وعرض المسافات بين المربعات المحيطة بهما على الفور. لا سحب، ولا إدخال يدوي — مجرد نقرتين.
شاهد المسافة الأفقية (X) والمسافة العمودية (Y) والمسافة القطرية في وقت واحد — كل منها معروض بخط قياس وتسمية مرمز بالألوان. يتم عرض X باللون الكهرماني، و Y باللون الأحمر، والقطري باللون الأرجواني.
تربط خطوط القياس المتقطعة بين العنصرين المحددين مباشرة على الصفحة، مع وضع تسميات المسافة في منتصف كل خط. التمثيل المرئي يجعل من الواضح على الفور ما يتم قياسه.
يعرض كل عنصر محدد أبعاده الخاصة للعرض × الارتفاع في تسمية صغيرة. يتيح لك ذلك رؤية أحجام العناصر والمسافات بينها في نفس العرض — دون تبديل الأدوات.
انقر فوق زوج جديد من العناصر لتحديث القياسات على الفور. لا حاجة لإلغاء تنشيط الأداة وإعادة تنشيطها. يتم استبدال خطوط القياس السابقة بخطوط جديدة لزوج العناصر الجديد.
يعرض شريط المعلومات الثابت في أسفل إطار العرض ملخصًا مضغوطًا: أسماء كلا العنصرين وأبعادهما، بالإضافة إلى قيم المسافة الثلاثة جميعها (X، Y، القطري). ملائم للنسخ وللصق في تقارير الأخطاء أو ملاحظات التصميم.
المخطط يشير إلى مكان الرأس يجب أن يكون بعيداً عن الزر بـ 24 بكسل لأسفل. اضغط على الزر واختر الرأس وتحقق من المسافة ص المحور وأكد إنها 24 بكسل.
قم بقياس المسافة بين البطاقة الأولى والثانية والثانية والثالثة وأكّد إذا لم يوجد تطابق، بذلك تقع بخلل المسافات المتباينة غالبًا بسبب المارجن أو خطأ بفجوة الفليكس.
قس العناصر على شاشة العرض لسطح المكتب وعاود الأمر بتغيير الشاشة لحجم الجوال من جديد للتيقن من تكيف المسافات بكل نقطة لتعمل بحسب المطلوب دون إحداث فوضى.
ضمن مقاساتك بشكل دقيق في تقارير مشاكلك، قل على سبيل المثال المسافة من الملاحة وصورتك 47، ويجب أن تكون 32 كما يقتضي التصميم. استخدم شريط المعلومة بالأداة للصقه.
اختر عنصرين ينبغي أن يتوازيا أفقياً مثلاً وإن حصلت على مسافتها صفر بمدى محور Y فإنها تمت بالمحاذاة، إن أعطى أي مقاس آخر فهو دليل على انحرافها وأيّ من تلك الأرقام توضيح له.
افتح اللوحة العائمة لـ DevSuite Pro وانقر فوق أيقونة قياس المسافة. يتغير المؤشر إلى خط متقاطع مما يعني أنه يمكنك اختيار العنصر الأول.
انقر على أي عنصر بصفحة الويب. سيبرز بلون حدود أزرق ووصف العنصر A وسيتم عرض معلومات مثل أبعاد العنصر (الطول، العرض، بالبكسل).
انقر على عنصر ثانٍ وسيبرز بخطوط خضراء ويوصف كعنصر B، وبطبيعة الحال ستربط خطوط قياسية بين العنصرين.
يتم إظهار ثلاث مساحات للقياس: أفقي (X) ولونه أرجواني، وعمودي بلون أحمر (Y) وأخيراً القطري (موف). سيأخذ الوصف رقم كل قياس بأسفله، وشريط المعلومات بكل المقاسات في أسفل الشاشة.
انقر فوق زوج من العناصر لقياسها في التو. انقر فوق زر الأداة الموجود باللوحة لتعطيل عملها عند الانتهاء.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
