يقوم "كاشف المكونات" بالتعرف التلقائي على إطار عمل الواجهة الأمامية المستخدم في موقع الويب ويكشف عن شجرة مكوناته بالكامل. شاهد أسماء مكونات React و Vue و Angular و Svelte، وقيم props/state الخاصة بها، وتسلسل التداخل — كل ذلك من خلال لوحة فحص واحدة.
هل تساءلت يومًا عن الإطار البرمجي (Framework) الذي بُني به موقع ويب؟ أو أردت معرفة كيفية تفكيك واجهة مستخدم معقدة إلى مكوناتها (Components)؟ تجيب أداة Component Detector عن هذين السؤالين فورًا. فهي تفحص الصفحة بحثًا عن بصمات خاصة بكل إطار عمل (عُقد React Fiber، ومثيلات مكونات Vue، وعلامات مناطق Angular، وبيانات مكونات Svelte الوصفية) وتحدد الإطار المستخدم وإصداره وشجرة المكونات كاملة. وبالنسبة لـ React وVue، تذهب الأداة إلى أبعد من ذلك - فتعرض خصائص (Props) وحالات (State) المكونات لتفهم البيانات التي تحرك كل جزء من واجهة المستخدم.
انقر على أي مكون في الشجرة لتمييز عنصر DOM المقابل له على الصفحة، أو انقر على عنصر في الصفحة لتحديد موقعه في الشجرة. إنها أشبه بأدوات React DevTools أو Vue DevTools، لكنها مدمجة داخل صفحتك كلوحة عائمة خفيفة تعمل دون الحاجة لتثبيت إضافة منفصلة خاصة بكل إطار عمل لكل مشروع تطّلع عليه.
يعمل الاكتشاف حتى على المواقع المصغّرة (Minified) والمجمّعة للإنتاج حيث تم تشويه أسماء المكونات والمتغيرات - إذ تبحث الأداة عن بصمات هيكلية (Structural Signatures) بدلاً من الاعتماد على كود مصدري قابل للقراءة، وهو ما يجعلها تستمر في العمل على المواقع التي لم تُصدر أبدًا خريطة مصدر (Source Map). وإلى جانب الأطر الأربعة الكبرى، تتعرف الأداة أيضًا على الأطر الفوقية (Meta-Frameworks) المبنية فوقها، مثل Next.js وNuxt، وتعرضها كطبقة منفصلة عن بيئة تشغيل React أو Vue الأساسية. هذا يجعلها خطوة أولى سريعة كلما وصلت إلى قاعدة كود غير مألوفة أو موقع أحد المنافسين وتحتاج لفهم ما تنظر إليه قبل التعمق أكثر.
يكتشف الأطر المختلفة تلقائيًا كـ React (بما في ذلك Next.js، Gatsby، Remix)، و Vue (بما في ذلك Nuxt)، و Angular، و Svelte (بما في ذلك SvelteKit)، و Preact، و Solid، وغيرها. كما يُظهر اسم الإطار، ورقم الإصدار الدقيق، ونمط التجسيد/الـ Rendering (من جانب العميل - client-side، أو SSR، أو هجين).
يُظهر التسلسل الهرمي الكامل للمكونات في شجرة بيانات قابلة للطي. شاهد كيف أن مُكون النظام (App) الأساسي قد يشمل شريط تصفح (Navbar) والذي بدوره يحتوي على روابط مُجمّعة (NavLinks) وكل رابط هو رابط مُنفصل بذاته (Link). جميع علاقات التداخل والترابط בין الأب والابن واضحة وضوح الشمس.
تعرض الأداة تفاصيل הـ props و הـ state المُرسلة للمُكونات بشكل مستمر בـ React و Vue. فمثلًا، يمكنك أن تُلاحظ أن صفحة (Dashboard) قد استلمت القيم التالية title="Overview"، loading=false، و columns=2. إنها طريقة لا تُقدر بثمن للمطورים ليُعاينوا سريان البيانات بطريقة فعالة.
انقر على أي مُكونใน قائمة الشجرة כדי لتسليط الضوء على عنصر الـ DOM التابع للمكون في الصفحة بواجهة ملونة. أو اضغط على أي عنصر في الصفحة لتتمكن من إيجاد أبيه، בתוך شجرة المكونات. تنقل بكل حرية عبر أي إتجاه تستريح فيه.
يُحسب ويُعرض أعداد المُكونات ككل التي تم استحضارها بالصفحه، وكم مُكون مُميز مُقارنةً بالحالات المُكررة، وأيضاً المُكونات الأكثر ظهوراً أو استعانة. تُعتبر الأداة خير معاون لمعرفة مُستوى التداخُل في الصفحة ومعرفة السِمات والمُكونات المُستعملة بشكل دوري.
يتعقّب الـ Frameworks حتى אם كانت האكواد مُصغرة (minified) ومُجهّزة للإنتاج. فنظام الـ React fiber tree وعلامات (vue__) أو الـ ng בـ Angular جميعهم يبقون ظاهרים בـ وضع التشغيل (Production)، وما يفعله الـ (Component Detector) هو قراءة کل التفاصيل السالفة دون الالتفات لسياسة بنائه.
قم בزيارة أي موقع ويب لتعرف ما הأداوات التي صُممت بها (React، Vue، Angular، أو Svelte) وأي رقم إصدار كذلك! وبالتبادل مع כـ Site Stack (رصيد الموقع التقني) תקבל على مُلخّص شامل حول كل מאת التقنيات (Content Delivery Network, وبيانات تحليلية، و כُتل محتويات).
ادرس كيف تقوم مواقع وتطبيقات الإنتاج בـتجزئة واجهة المستخدم الخاصة بها إلى مكونات فرعية. شاهد كيف يقوم Stripe بهيكلة صفحة التسعير الخاصة به، أو كيف ينظم Linear لوحة التحكم الخاصة به، أو كيف يفصل أي تطبيق واجهته הرئيسية והـ navigation וالتِصفّح، والمُقسِّمات إلى Components.
لا يُعرض المكون بشكل صحيح؟ افحص الـ props و الـ state الخاصة به لمعرفة أي بيانات يتم استقبالها بالفعل. قارن القيم المتوقعة بالقيم الفعلية لتحديد موقع כَسر تدفق البيانات — دون الحاجة لكتابة بيانات في console.log.
هل تستعد لمقابلة בمجال الـ (Frontend)؟ قم בتصفح مواقع الإنتاج لرؤية أنماط المُكونات הפעילה באמת — עמדות החלוקה ما بين (Container) وما بين הـ (presentational) והاستخدام לـ (render prop) והـ (context providers) והـ (HOC wrappers) كلها ברורה في شجرة المُكونات כאן.
استعرض مواقع لمنتجات متشابهة אך تختلف بكونها بُنيت על ידי إطارات Framework مُتباينة، وقارن المُشترك بينهم في أنظمة الـ Components.. شاهد كيف يتعاطى כلٌ من تطبيقي Vue וـ React עם أجزاء الواجهة — מـ navigation, forms, data tables, וـ modals — واستكشف الفروق הبرمجية والبنيوية.
افتح لوحة DevSuite Pro العائمة وانقر على أيقونة "كاشف المكونات". تقوم الأداة بفحص شجرة الـ DOM بحثًا عن علامات دلالية لإطار العمل وبناء شجرة المكونات.
يعرض رأس اللوحة إطار العمل المكتشف (React، Vue، Angular، Svelte)، وإصداره، ووضع التجسيد. إذا لم يتم اكتشاف أي إطار عمل، فإنه يبلغ عن الصفحة كلغة HTML/CSS/JS تقليدية.
قم بتوسيع وطي المكونات في الشجرة لاستكشاف التسلسل الهرمي. تظهر أسماء المكونات مع عمق التداخل المُشار إليه بواسطة المسافة البادئة. تظهر المكونات المتكررة كعداد للنسخ.
اضغط على أي مكون بالشجرة لمعرفة الـ props وقيم الـ states הנוכחים بتشكيلة قسم التفاصيل بالأسفل. بالنسبة إلى React: הـ props و state و hooks. ולـ Vue: الـ props، و data، والخصائص المحسوبة (computed properties).
بمجرد الضغط على المكون تتحدد أطراف العنصر، وستُلاحظ حواف مُلوّنة لرديف الـ DOM مع طبقة شبة شفافة. اضغط على أي عنصر في الصفحة للوصول إلية داخل شجرة المتصفح.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 64 أداة للمطورين لمتصفحك.
