Component Detector מזהה אוטומטית איזה framework frontend אתר משתמש בו וחושף את עץ הרכיבים המלא שלו. ראה שמות רכיבי React, Vue, Angular ו-Svelte, ערכי props/state שלהם, והיררכיית הקינון — הכול מלוח בדיקה אחד.
תמיד תהיתם באיזה framework אתר בנוי? או רציתם לראות כיצד ממשק משתמש מורכב מפורק לרכיבים? Component Detector עונה על שתי השאלות מיידית. הוא סורק את הדף לחתימות ספציפיות ל-framework (צמתי fiber של React, מופעי רכיב Vue, סמני zone של Angular, מטא-נתוני רכיב Svelte) ומזהה את ה-framework, גרסתו, ועץ הרכיבים המלא. עבור React ו-Vue, הוא מרחיק לכת — ומציג ערכי props ו-state של רכיבים כדי שתוכל להבין מה נתונים מניעים כל חלק בממשק המשתמש. לחץ על כל רכיב בעץ להדגשת אלמנט ה-DOM המתאים בדף, או לחץ על אלמנט בדף כדי לאתר את הרכיב שלו בעץ. זה כמו React DevTools או Vue DevTools, אך מובנה בדף שלך כלוח צף קל משקל.
מזהה React (כולל Next.js, Gatsby, Remix), Vue (כולל Nuxt), Angular, Svelte (כולל SvelteKit), Preact, Solid ו-frameworks אחרים אוטומטית. מציג את שם ה-framework, מספר גרסה מדויק ומצב עיבוד (client-side, SSR, או hybrid).
מציג את היררכיית הרכיבים המלאה בתצוגת עץ הניתנת לכיווץ. ראה כיצד רכיב App ברמה עליונה מכיל Navbar, המכיל NavLinks, המכילים רכיבי Link בודדים. עומק הקינון ויחסי הורה-ילד ברורים לחלוטין.
עבור רכיבי React ו-Vue, צפה בערכי props ו-state הנוכחיים המועברים לכל רכיב. ראה שרכיב Dashboard מקבל title="Overview", loading=false ו-columns=2. שימושי מאין כמוהו להבנת זרימת נתונים.
לחץ על כל רכיב בלוח העץ להדגשת אלמנט ה-DOM המתאים בדף עם שכבה צבעונית. או לחץ על כל אלמנט בדף כדי למצוא ולבחור את רכיב ההורה שלו בעץ. נווט בכל כיוון שטבעי לך.
ראה את המספר הכולל של רכיבים המוצגים בדף, כמה ייחודיים לעומת מופעים חוזרים, ואילו רכיבים מופיעים לרוב. שימושי להבנת מורכבות הדף וזיהוי תבניות שימוש חוזר.
מזהה frameworks אפילו ב-builds ייצור ממוזערים. עץ fiber של React, סמני __vue__ של Vue, ותכונות ng של Angular נשמרים במצב ייצור — Component Detector קורא אותם ללא תלות בתצורת ה-build.
בקר בכל אתר ודע מיידית אם הוא בנוי עם React, Vue, Angular או Svelte — כולל הגרסה המדויקת. שלב עם Site Stack לביקורת טכנולוגיה מלאה הכוללת CDN, analytics ומידע CMS.
לימוד כיצד אפליקציות ייצור מפרקות את ממשק המשתמש שלהן לרכיבים. ראה כיצד Stripe מבנה את דף התמחור שלו, כיצד Linear מארגן את ה-dashboard שלו, או כיצד כל אפליקציה מובנית היטב מפרידה פריסה, ניווט ותוכן לרכיבים.
רכיב לא מוצג כראוי? בדוק את props ו-state שלו כדי לראות אילו נתונים הוא מקבל בפועל. השווה ערכים צפויים מול ערכים בפועל כדי לזהות היכן זרימת הנתונים נשברת — ללא הצהרות console.log.
מתכונן לראיון frontend? עיין באתרי ייצור כדי לראות תבניות רכיבים מהעולם האמיתי — פיצולי container/presentational, שימוש ב-render prop, context providers ועטיפות HOC — הכול גלוי בעץ הרכיבים.
בקר במוצרים דומים הבנויים עם frameworks שונים והשווה את מבני הרכיבים שלהם. ראה כיצד אפליקציית React לעומת אפליקציית Vue מתמודדת עם אותה תבנית ממשק — ניווט, טפסים, טבלאות נתונים, modals — והבן את ההבדלים הארכיטקטוניים.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל Component Detector. הכלי סורק את ה-DOM של הדף לסמנים ספציפיים ל-framework ובונה את עץ הרכיבים.
כותרת הלוח מציגה את ה-framework שזוהה (React, Vue, Angular, Svelte), גרסתו ומצב העיבוד. אם לא זוהה framework, הוא מדווח על הדף כ-vanilla HTML/CSS/JS.
הרחב וכווץ רכיבים בעץ כדי לחקור את ההיררכיה. שמות הרכיבים מופיעים עם עומק הקינון שלהם המסומן בהזחה. רכיבים חוזרים מציגים ספירת מופעים.
לחץ על כל רכיב בעץ כדי לראות את ערכי props ו-state הנוכחיים שלו בקטע הפרטים למטה. עבור React: props, state ו-hooks. עבור Vue: props, data ומאפיינים מחושבים.
לחץ על כל רכיב להדגשת אלמנט ה-DOM המתאים בדף עם גבול צבעוני ושכבה שקופה למחצה. לחץ על אלמנט בדף כדי לאתר אותו בעץ.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
