تشخیصدهنده کامپوننت بهطور خودکار شناسایی میکند که یک وبسایت از کدام framework frontend استفاده میکند و درخت کامپوننت کامل آن را آشکار میسازد. نام کامپوننتهای React، Vue، Angular و Svelte، مقادیر props/state و سلسلهمراتب تودرتو را ببینید.
تا به حال کنجکاو شدهاید که یک وبسایت با چه فریمورکی ساخته شده؟ یا خواستهاید ببینید یک رابط کاربری پیچیده چگونه به کامپوننتها تجزیه شده است؟ ابزار Component Detector هر دو سؤال را فوراً پاسخ میدهد. این ابزار صفحه را برای یافتن امضاهای مخصوص هر فریمورک (نودهای fiber در React، نمونههای کامپوننت در Vue، نشانگرهای zone در Angular، متادیتای کامپوننت در Svelte) اسکن میکند و فریمورک، نسخه آن و درخت کامل کامپوننتها را شناسایی میکند. برای React و Vue، این ابزار فراتر هم میرود — props و مقادیر state هر کامپوننت را نیز نشان میدهد تا بفهمید چه دادهای پشت هر بخش از رابط کاربری قرار دارد.
روی هر کامپوننتی در درخت کلیک کنید تا عنصر متناظر آن در DOM صفحه هایلایت شود، یا روی یک عنصر در صفحه کلیک کنید تا کامپوننت متناظرش در درخت پیدا شود. این دقیقاً شبیه React DevTools یا Vue DevTools است، با این تفاوت که بهصورت یک پنل شناور سبک درون خود صفحه شما کار میکند، بدون نیاز به نصب یک اکستنشن جداگانه مخصوص هر فریمورک برای هر پروژهای که بررسی میکنید.
شناسایی حتی روی سایتهای minifyشده و آمادهی production که نام کامپوننتها و متغیرها درهمریخته (mangled) شدهاند نیز کار میکند — این ابزار بهجای تکیه بر سورس خوانا، به دنبال امضاهای ساختاری میگردد، به همین دلیل روی سایتهایی که هرگز source map منتشر نکردهاند نیز کار میکند. فراتر از چهار فریمورک اصلی، این ابزار متا-فریمورکهای ساختهشده روی آنها مانند Next.js و Nuxt را نیز تشخیص میدهد و آنها را بهعنوان یک لایه جداگانه از رانتایم زیرین React یا Vue گزارش میکند. همین موضوع آن را به یک قدم اول سریع تبدیل میکند برای هر بار که وارد یک کدبیس ناآشنا یا سایت یک رقیب میشوید و میخواهید پیش از کندوکاو بیشتر، بفهمید با چه چیزی طرف هستید.
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 را به صورت رایگان نصب کنید و بیش از ۶۴ ابزار توسعه را برای مرورگر خود باز کنید.
