Measure Distance מאפשר ללחוץ על כל שני אלמנטים בדף אינטרנט ולראות מיידית את מרחק ה-pixel המדויק ביניהם — אופקית (X), אנכית (Y) ובאלכסון. קווי חיבור חזותיים עם מדידות מתויגות מופיעים בין האלמנטים, וסרגל מידע מציג את מימדי שני האלמנטים ואת המרחקים בשלושת הכיוונים.
בדיקת הריווח בין שני אלמנטים ב-DevTools של הדפדפן דורשת ריחוף על כל אלמנט בנפרד, קריאת ערכי margin/padding, וחישוב מנטלי לחישוב המרחק החזותי בפועל. Measure Distance מבטל זאת לחלוטין. לחץ על Element A, לחץ על Element B, ומרחקי ה-pixel המדויקים מופיעים מיידית — X (אופקי), Y (אנכי), ואלכסוני — המוצגים כקווים מתויגים המחברים את שני האלמנטים ישירות על הדף. הכלי מודד מקצוות האלמנטים (bounding boxes), כך שהערכים מייצגים את הפער החזותי בפועל בין האלמנטים כפי שהמשתמש רואה אותם. זה שונה מקריאת ערכי margin/padding, שאינם מתחשבים בהשפעה המצטברת של מספר מאפייני ריווח. כל אלמנט נבחר מסומן בגבול צבעוני ומציג את מימדיו שלו (רוחב × גובה), כך שניתן לראות את גדלי האלמנטים ואת הריווח ביניהם בתצוגה אחת.
לחץ על האלמנט הראשון (מסומן בגבול כחול), ואז לחץ על האלמנט השני (מסומן בגבול ירוק). המרחקים בין ה-bounding boxes שלהם מחושבים ומוצגים מיידית. ללא גרירה, ללא קלט ידני — רק שני קליקים.
ראה את המרחק האופקי (X), המרחק האנכי (Y) והמרחק האלכסוני בו-זמנית — כל אחד מוצג עם קו מדידה וכיתוב עם קידוד צבע משלו. X בענבר, Y באדום, אלכסוני בסגול.
קווי מדידה מקווקווים מחברים את שני האלמנטים הנבחרים ישירות על הדף, עם כיתובי מרחק הממוקמים במרכז כל קו. הייצוג החזותי מבהיר מיידית מה נמדד.
כל אלמנט נבחר מציג את מימדי רוחב × גובה שלו בכיתוב קטן. זה מאפשר לראות הן את גדלי האלמנטים והן את הריווח ביניהם באותה תצוגה — מבלי לעבור בין כלים.
לחץ על זוג אלמנטים חדש כדי לעדכן את המדידות מיידית. אין צורך להשבית ולהפעיל מחדש את הכלי. קווי המדידה הקודמים מוחלפים בחדשים עבור זוג האלמנטים החדש.
סרגל מידע קבוע בתחתית ה-viewport מציג סיכום קומפקטי: שמות ומימדי שני האלמנטים, בתוספת כל שלושת ערכי המרחק (X, Y, אלכסוני). נוח להעתקה להדבקה בדוחות באגים או משוב עיצובי.
המוקאפ אומר שהכפתור צריך להיות 24px מתחת לכותרת. לחץ על הכותרת, לחץ על הכפתור, ואשר שמרחק ה-Y הוא בדיוק 24px. תופס אי-התאמות ריווח עדינות שאינן גלויות לעין אך מפורטות ב-design tokens.
מדוד את המרחק בין Card 1 ל-Card 2, ואז בין Card 2 ל-Card 3. אם הפערים אינם זהים, מצאת חוסר עקביות — ככל הנראה נגרם על ידי margins שונים או בעיית gap ב-flexbox.
מדוד מרחקי אלמנטים ברוחב desktop, ואז שנה גודל הדפדפן ומדוד שוב ברוחב mobile. ודא שהריווח משתנה בצורה נכונה בין breakpoints ושהתאמות ה-margin/padding ה-responsive עובדות כמתוכנן.
כלול מדידות מדויקות בדוחות הבאגים שלך: "הפער בין ה-nav ל-hero הוא 47px, צריך להיות 32px לפי מפרט העיצוב." ערכי סרגל המידע ניתנים להעתקה ישירות לטיקטים ב-Jira או ב-GitHub issues.
לחץ על שני אלמנטים שאמורים להיות מיושרים אופקית. אם מרחק ה-Y הוא 0px, הם מיושרים בצורה מושלמת. כל ערך Y שאינו אפס מצביע על אי-יישור אנכי — המספר המדויק אומר לך כמה pixel זה מחוץ ליישור.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל ה-Measure Distance. הסמן משתנה לצלב, המציין שניתן לבחור את האלמנט הראשון.
לחץ על כל אלמנט בדף. הוא מסומן בגבול כחול ומתויג "Element A" עם מימדיו (רוחב × גובה ב-pixel).
לחץ על אלמנט שני. הוא מסומן בגבול ירוק ומתויג "Element B." קווי מדידה מופיעים מיידית המחברים את שני האלמנטים.
שלושה קווי מדידה מופיעים: אופקי (X) בענבר, אנכי (Y) באדום, ואלכסוני בסגול. לכל קו יש כיתוב המציג את מרחק ה-pixel. סרגל המידע בתחתית מסכם את כל הערכים.
לחץ על זוג אלמנטים נוסף למדידת מרחק חדש מיידית. לחץ על סמל ה-Measure Distance ב-dock כדי להשבית את הכלי בסיום.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
