Component Detector מזהה אוטומטית איזה framework frontend אתר משתמש בו וחושף את עץ הרכיבים המלא שלו. ראה שמות רכיבי React, Vue, Angular ו-Svelte, ערכי props/state שלהם, והיררכיית הקינון — הכול מלוח בדיקה אחד.
פעם תהית באיזה פריימוורק בנוי אתר מסוים? או רצית לראות איך ממשק משתמש מורכב מפורק לרכיבים (components)? Component Detector עונה על שתי השאלות מיידית. הוא סורק את הדף לחתימות ספציפיות לפריימוורק (React fiber nodes, מופעי רכיבי Vue, סמני zone של Angular, מטא-דאטה של רכיבי Svelte) ומזהה את הפריימוורק, את הגרסה שלו ואת עץ הרכיבים המלא. עבור React ו-Vue הוא הולך צעד נוסף - ומציג את ה-props וערכי ה-state של הרכיבים כך שתוכל להבין אילו נתונים מניעים כל חלק בממשק.
לחיצה על כל רכיב בעץ מדגישה את אלמנט ה-DOM המתאים בדף, ולחיצה על אלמנט בדף מאתרת את הרכיב שלו בעץ. זה כמו React DevTools או Vue DevTools, אבל מובנה ישירות בדף שלך כפאנל צף וקליל, שעובד בלי להתקין תוסף נפרד וייעודי לכל פריימוורק בכל פרויקט שאתה בודק.
הזיהוי עובד גם באתרים ממוזערים (minified) שהופצו לפרודקשן, שבהם שמות הרכיבים והמשתנים עברו טשטוש - הכלי מחפש חתימות מבניות ולא מסתמך על קוד מקור קריא, ולכן הוא ממשיך לעבוד גם באתרים שמעולם לא הפיצו source map. מעבר לארבעת הפריימוורקים הגדולים, הכלי מזהה גם מטא-פריימוורקים שנבנים עליהם, כמו Next.js ו-Nuxt, ומדווח עליהם כשכבה נפרדת מה-runtime הבסיסי של React או Vue. זה הופך אותו לצעד ראשון ומהיר בכל פעם שאתה נוחת על קוד לא מוכר או על אתר של מתחרה וצריך להבין במה מדובר לפני שאתה צולל לעומק.
מזהה 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 בחינם ופתח 64+ כלי פיתוח לדפדפן שלך.
