Page Outliner מציג את מבנה ה-DOM המלא של כל דף אינטרנט כשכבת עץ ויזואלית — ישירות על הדף עצמו. כל אלמנט HTML מקבל תווית צבעונית המציגה את שם התג שלו, ועומק הקינון נחשף באמצעות הזחות וקווי חיבור. זה כמו לצפות בלוח Elements של DevTools, אך מוקרן ישירות על הדף החי.
DevTools של הדפדפן מציגים את ה-DOM כעץ טקסט בלוח צדדי, נפרד מהפריסה הויזואלית. Page Outliner גושר על הפער הזה על ידי הקרנת מבנה ה-DOM ישירות על הדף. כל אלמנט מקבל תג צבעוני קטן המציג את שם התג שלו (div, section, nav, h1, p, button וכו'), ממוקם בפינה השמאלית העליונה של האלמנט. אלמנטים מקוננים מוזחים ויזואלית, והמבנה הדמוי-עץ מיידי לעין. כך קל מאוד להבין כיצד דף בנוי במבט אחד — ניתן לראות שה-header מכיל nav עם חמישה תגי anchor, שלאזור התוכן הראשי שלושה אלמנטי section שכל אחד מכיל מאמרים, ושה-footer עוטף div לוגו ורשימת קישורים. הכול בלי לפתוח DevTools או לקרוא קוד HTML גולמי.
כל אלמנט גלוי בדף מקבל שכבת תג צבעונית המציגה את שם תג ה-HTML שלו. מאלמנטי html ו-body החיצוניים ביותר ועד spans, קישורים וכפתורים בודדים — שום דבר לא מוסתר. השכבה מציגה את היררכיית האלמנטים המלאה כמפה ויזואלית.
כל סוג אלמנט מקבל צבע רקע ייחודי לתג שלו. אלמנטים מבניים (header, main, footer) בכחול, ניווט בענבר, כותרות בסגול, פסקאות באפור, קישורים בצהוב, כפתורים בתכלת, תמונות בוורוד. ניתן לזהות סוגי אלמנטים לפי צבע מבלי לקרוא את הטקסט.
רחף מעל כל תג כדי להדגיש את האלמנט המתאים עם שכבה שקופה למחצה המציגה את ממדיו המדויקים (רוחב × גובה בפיקסלים). גבולות האלמנט מסומנים והתג הופך בולט יותר — מה שמקל לזהות לאיזה אלמנט שייך כל תג.
אלמנטים מקוננים עמוק מוזחים יותר מהקצה השמאלי, כך שיחסי הקינון גלויים מיידית. ראה במבט אחד אם לדף יש יותר מדי div עוטפים (5+ רמות עומק) או מבנה נקי ושטוח. קווי חיבור מציגים יחסי הורה-ילד.
השכבות ממוקמות בצורה מוחלטת ואינן משפיעות על פריסת הדף, גלילה, או התנהגות JavaScript. תוויות התגים קטנות ושקופות למחצה כך שניתן עדיין לראות את תוכן הדף מתחת. כיבוי מיידי להחזרה למצב רגיל.
לחץ על תג של אלמנט מכיל כדי לכווץ את ילדיו ולהסתיר את התגים המקוננים. שימושי להתמקדות בקטע ספציפי מבלי להיות מוצף על ידי עץ ה-DOM המלא של הדף. לחץ שוב להרחבה.
נחתת על דף אינטרנט מורכב וצריך להבין כיצד הוא בנוי? Page Outliner מציג לך את כל היררכיית ה-DOM במבט אחד — אילו קטעים מכילים איזה תוכן, כיצד הניווט מובנה, והיכן מתחיל ומסתיים אזור התוכן הראשי.
קינון יתר של div מקשה על כתיבת CSS ומאט עיבוד דפים. אם אתה רואה 6+ רמות של תגים צבעוניים מוערמים על תוכן טקסט פשוט, הקוד זקוק לפישוט. Page Outliner הופך את זה לברור מיידית.
האם הדף משתמש באלמנטים סמנטיים נאותים? חפש תגי header, nav, main, article, section ו-footer. אם הכול הוא רק אלמנטי div, לדף חסר מבנה סמנטי — מה שפוגע בנגישות, SEO ותחזוקה.
בקר בכל אתר אינטרנט מובנה היטב (Stripe, Linear, Vercel) והפעל את Page Outliner כדי לראות כיצד צוותי ה-frontend שלהם מבנים את ה-HTML שלהם. למד תבניות פריסה על ידי צפייה במבני DOM מהעולם האמיתי על דפי ייצור.
השתמש ב-Page Outliner תחילה כדי לזהות אילו אלמנטים קיימים והיכן הם נמצאים, ואז עבור ל-CSS Inspector או Measure Distance לחקור לעומק אלמנטים ספציפיים שזיהית.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל Page Outliner. הכלי סורק מיידית את ה-DOM של הדף ומציג תגים צבעוניים על כל אלמנט גלוי.
תגים צבעוניים מופיעים בפינה השמאלית העליונה של כל אלמנט ומציגים את שם התג שלו (div, section, h1, p וכו'). מבנה הקינון גלוי דרך הזחה ומיקום התגים.
הזז את העכבר מעל כל תג כדי להדגיש את האלמנט המתאים. שכבה שקופה למחצה מציגה את גבולות האלמנט וממדיו. זה מחבר את שם התג המופשט למיקומו הויזואלי בדף.
לחץ על תג של מכיל כדי לכווץ את תגי ילדיו. זה מאפשר להתמקד באזורי דף ספציפיים ללא עומס ויזואלי מאלמנטים מקוננים עמוק.
לחץ על סמל Page Outliner ב-dock כדי להסיר את כל השכבות ולחזור לתצוגת הדף הרגילה. ללא עקבות.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
