يقوم "كاشف المكونات" بالتعرف التلقائي على إطار عمل الواجهة الأمامية المستخدم في موقع الويب ويكشف عن شجرة مكوناته بالكامل. شاهد أسماء مكونات React و Vue و Angular و Svelte، وقيم props/state الخاصة بها، وتسلسل التداخل — كل ذلك من خلال لوحة فحص واحدة.
هل تساءلت يوماً عن إطار العمل الذي بني به موقع ويب معين؟ أو أردت أن ترى كيف يتم تفكيك واجهة مستخدم (UI) معقدة إلى مكونات؟ يجيب "كاشف المكونات" على كلا السؤالين فوراً. فهو يفحص الصفحة بحثاً عن التوقيعات الخاصة بأطر العمل (عُقَد React fiber، مثيلات مكونات Vue، علامات نطاق Angular، والبيانات الوصفية لمكونات Svelte) ويحدد إطار العمل، وإصداره، وشجرة المكونات كاملة. وبالنسبة لـ React و Vue، فإنه يذهب لأبعد من ذلك — حيث يعرض خصائص المكون (props) وقيم حالته (state) حتى تتمكن من فهم البيانات التي تحرك كل جزء من الواجهة. انقر فوق أي مكون في الشجرة لتمييز عنصر DOM المقابل على الصفحة، أو انقر فوق مساحة على الصفحة لتحديد مكونها في الشجرة. هذه الخاصية تتشابه تماماً مع وظائف React DevTools أو Vue DevTools ولكن بأداة بسيطة متوفرة على شكل لوحة عائمة تُرافق متصفحك.
يكتشف الأطر المختلفة تلقائيًا كـ 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 مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
