تشخیصدهنده کامپوننت بهطور خودکار شناسایی میکند که یک وبسایت از کدام framework frontend استفاده میکند و درخت کامپوننت کامل آن را آشکار میسازد. نام کامپوننتهای React، Vue، Angular و Svelte، مقادیر props/state و سلسلهمراتب تودرتو را ببینید.
آیا تا به حال تعجب کردهاید که یک وبسایت با چه framework ساخته شده؟ یا میخواستید ببینید یک UI پیچیده چگونه به کامپوننتها تجزیه میشود؟ تشخیصدهنده کامپوننت هر دو سوال را فوراً پاسخ میدهد. صفحه را برای امضاهای خاص framework اسکن میکند و framework، نسخه آن و درخت کامپوننت کامل را شناسایی میکند. مثل React DevTools یا Vue DevTools، اما در صفحه شما به عنوان یک پانل شناور سبک.
React (شامل Next.js، Gatsby، Remix)، Vue (شامل Nuxt)، Angular، Svelte (شامل SvelteKit)، Preact، Solid و سایر frameworkها را بهطور خودکار شناسایی میکند. نام framework، شماره نسخه دقیق و حالت رندر (client-side، SSR یا hybrid) را نشان میدهد.
سلسلهمراتب کامل کامپوننت را در یک نمای درختی قابل جمعشدن رندر میکند. ببینید کامپوننت App سطح بالا چگونه شامل یک Navbar است که NavLinkها را در بر میگیرد.
برای کامپوننتهای React و Vue، مقادیر فعلی props و state ارسالشده به هر کامپوننت را مشاهده کنید. درک جریان داده را آسان میکند.
روی هر کامپوننت در پانل درخت کلیک کنید تا عنصر DOM مربوطه در صفحه با یک overlay رنگی برجسته شود. یا روی هر عنصر در صفحه کلیک کنید تا کامپوننت والد آن در درخت پیدا شود.
تعداد کل کامپوننتهای رندر شده در صفحه، تعداد منحصربهفرد در مقابل نمونههای تکراری، و پرتکرارترین کامپوننتها را ببینید.
frameworkها را حتی در buildهای تولید minified شناسایی میکند. درخت fiber React، نشانگرهای __vue__ Vue و ویژگیهای ng Angular در حالت تولید باقی میمانند.
از هر وبسایتی بازدید کنید و فوراً بدانید با React، Vue، Angular یا Svelte ساخته شده — شامل نسخه دقیق. با Site Stack ترکیب کنید برای ممیزی کامل فناوری.
مطالعه کنید چگونه برنامههای تولید UI خود را به کامپوننتها تجزیه میکنند. ببینید Stripe صفحه قیمتگذاری خود را چگونه ساختار میدهد.
یک کامپوننت بهدرستی رندر نمیشود؟ props و state آن را بررسی کنید تا ببینید واقعاً چه دادهای دریافت میکند — بدون console.log.
برای مصاحبه frontend آماده میشوید؟ سایتهای تولید را مرور کنید تا الگوهای کامپوننت دنیای واقعی را ببینید.
محصولات مشابه ساختهشده با frameworkهای مختلف را بازدید کرده و ساختارهای کامپوننت آنها را مقایسه کنید.
داک شناور DevSuite Pro را باز کنید و روی آیکون تشخیصدهنده کامپوننت کلیک کنید. ابزار DOM صفحه را برای نشانگرهای خاص framework اسکن کرده و درخت کامپوننت را میسازد.
header پانل framework شناساییشده (React، Vue، Angular، Svelte)، نسخه آن و حالت رندر را نشان میدهد. اگر framework شناسایی نشود، صفحه به عنوان vanilla HTML/CSS/JS گزارش میشود.
کامپوننتها را در درخت گسترش دهید و جمع کنید تا سلسلهمراتب را کاوش کنید. نام کامپوننتها با عمق تودرتویشان نشان داده میشوند.
روی هر کامپوننت در درخت کلیک کنید تا مقادیر فعلی props و state را در بخش جزئیات ببینید. برای React: props، state و hooks. برای Vue: props، data و computed.
روی هر کامپوننت کلیک کنید تا عنصر DOM مربوطه در صفحه برجسته شود. روی عنصری در صفحه کلیک کنید تا در درخت پیدا شود.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
