מצב outline בלבד מוסיף מסגרות outline עם קידוד צבעים לכל רכיב HTML בדף אינטרנט, ומעניק לך מבט X-ray מיידי על מבנה ה-layout של הדף. ראה בדיוק היכן ממוקם כל div, section, header, פסקה וכפתור — כולל ה-padding, ה-margin ויחסי ה-nesting שלהם.
הבנת ה-layout של דף היא לרוב הצעד הראשון בניפוי שגיאות CSS. האם הרווח הנוסף נגרם בגלל padding או margin? האם רכיב רחב יותר מהצפוי בשל child בלתי מוגבל? האם שני רכיבים חופפים בשל position מתנגשות? מצב outline בלבד עונה על שאלות אלה מיידית על ידי ציור גבולות צבעוניים סביב כל רכיב בדף. בשונה מ-DevTools של הדפדפן (שמדגיש רכיב אחד בכל פעם), הכלי הזה מוסיף outline לכל הרכיבים בו-זמנית — ומעניק לך את התמונה המלאה. לכל סוג רכיב HTML יש צבע ייחודי: headers בכחול, רכיבי nav בצהוב, תוכן ראשי בירוק, פסקאות בוורוד, כפתורים בתכלת וכן הלאה. קידוד הצבעים מקל על זיהוי דפוסים מבניים וזיהוי רכיבים במבט חטוף מבלי לקרוא את ה-DOM.
הפעל/כבה outlines על כל רכיב בלחיצה אחת בלבד — ללא הגדרות, ללא לוח הגדרות. לחץ פעם אחת לראות את כל הגבולות, לחץ שוב להסירם. הדרך המהירה ביותר לדמיין מבנה layout בכל דף אינטרנט.
רכיבי HTML שונים מקבלים צבעי outline שונים לזיהוי חזותי מיידי. headers בכחול, navigation בצהוב, תוכן ראשי בירוק, headings בסגול, פסקאות בוורוד, כפתורים בתכלת, divs באפור. ניתן לזהות סוגי רכיבים מבלי לקרוא את ה-DOM.
Outlines הופכים בעיות CSS בלתי נראות לנראות. זהה margin בלתי צפוי שיוצר רווח לבן, padding שדוחף רכיבים לרוחב גדול מהצפוי, overflow שגורם לפס גלילה אופקי, או רכיבים מכווצים שתופסים גובה אפס. כל גבול של box הופך לנראה.
Outlines מקוננים חושפים את מבנה ה-parent-child של ה-DOM. ראה עד כמה עמוק הרכיבים מקוננים, איזה container עוטף איזה תוכן, והיכן נמצאים גבולות כל רמת nesting. ערך רב להבנת layout מורכב של grid ו-flex.
הפעל על כל דף אינטרנט — הפרויקטים שלך, אתרי לקוחות, דפי מתחרים או הפניות עיצוב. ה-outlines מוחלים באמצעות CSS injection ואינם משנים את מבנה ה-DOM או משפיעים על התנהגות JavaScript.
Outlines מצוירים באמצעות CSS outline (לא border), מה שאומר שאינם מוסיפים למימדי ה-box model של הרכיב. ה-layout של הדף נשאר בדיוק כפי שהיה — ה-outlines הם ויזואליים בלבד ואינם גורמים ל-reflow כלשהו.
מצב outline בלבד covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsהפער המסתורי בין sections? הפעל outlines ותראה מיד אם הוא נגרם מ-margin ברכיב התחתון, padding ב-container ההורה, או div ריק שלא ידעת שהוא שם. מה שלוקח דקות ב-DevTools לוקח שניות עם מצב outline.
שנה גודל חלון הדפדפן כשה-outlines פעילים כדי לצפות כיצד ה-layout זורם מחדש לאורך breakpoints. ראה אילו רכיבים נערמים, אילו גולשים, והיכן מבנה ה-grid או flexbox משתנה — הכל במבט אחד.
יותר מדי divs מקוננים? רכיבי wrapper מיותרים? מצב outline הופך over-nesting לנראה מיידית — אם רואים 5+ outlines קונצנטריים סביב תוכן פשוט, ה-markup יכול להיות מפושט. מצוין לבדיקת קוד של frontend PRs.
הפעל outlines בדף הבית שלך, ואז בדף משנה. האם הם חולקים את אותו מבנה layout? האם margin ורוחב sections עקביים? Outlines הופכים עקביות מבנית (או חוסר עקביות) לנראית מיידית.
הראה לתלמידים כיצד רכיבי HTML יוצרים boxes, כיצד ה-box model פועל עם padding ו-margin, וכיצד nesting יוצר את היררכיית הדף. מצב outline הופך מושגים מופשטים להדגמות נראות ואינטראקטיביות.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל מצב outline בלבד. מיד, כל רכיב HTML בדף מקבל גבול outline צבעוני.
לכל סוג רכיב יש צבע ייחודי. כחול לרכיבים מבניים (header, footer, section), ירוק לאזורי תוכן ראשי, סגול ל-headings, ורוד לפסקאות, תכלת לכפתורים ו-inputs, צהוב ל-navigation, ואפור ל-divs ו-spans גנריים.
חפש פערים בלתי צפויים (הנגרמים מ-margin), רכיבים שמתרחבים מעבר ל-container שלהם (overflow), ריווח א-סימטרי (padding לא עקבי), או wrappers מקוננים עמוק (div nesting מיותר). כולם הופכים לנראים מיידית.
השתמש במצב outline כנקודת מוצא, ואז עבור ל-CSS Inspector לבדיקת ערכים ספציפיים ברכיבים שזיהית, או ל-Measure Distance לאימות ריווח מדויק בין רכיבים עם outline.
לחץ שוב על סמל מצב outline להסרת כל ה-outlines וחזרה לתצוגת הדף הרגילה. אין צורך בניקיון — זהו toggle פשוט בלבד.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.