কম্পোনেন্ট ডিটেক্টর স্বয়ংক্রিয়ভাবে শনাক্ত করে যে একটি ওয়েবসাইট কোন ফ্রন্টএন্ড ফ্রেমওয়ার্ক ব্যবহার করছে এবং এর সম্পূর্ণ কম্পোনেন্ট ট্রি প্রকাশ করে। React, Vue, Angular এবং Svelte কম্পোনেন্টের নাম, তাদের props/state ভ্যালু এবং নেস্টিং হায়ারার্কি দেখুন — সবই একটি একক ইনস্পেকশন প্যানেল থেকে।
কখনো ভেবেছেন কোনো ওয়েবসাইট কোন ফ্রেমওয়ার্কে তৈরি? অথবা কোনো জটিল UI কীভাবে বিভিন্ন কম্পোনেন্টে ভাগ করা হয়েছে তা দেখতে চেয়েছেন? Component Detector উভয় প্রশ্নের উত্তর তাৎক্ষণিকভাবে দেয়। এটি পেজে ফ্রেমওয়ার্ক-নির্দিষ্ট সিগনেচারের জন্য স্ক্যান করে (React fiber node, Vue component instance, Angular zone marker, Svelte component metadata) এবং ফ্রেমওয়ার্ক, তার ভার্সন এবং সম্পূর্ণ কম্পোনেন্ট ট্রি শনাক্ত করে। React এবং Vue-এর ক্ষেত্রে, এটি আরও এগিয়ে যায় — component prop এবং state ভ্যালু দেখায়, যাতে আপনি বুঝতে পারেন UI-এর প্রতিটি অংশে কোন ডেটা কাজ করছে।
ট্রিতে যেকোনো কম্পোনেন্টে ক্লিক করলে পেজে সংশ্লিষ্ট DOM এলিমেন্ট হাইলাইট হয়ে যায়, অথবা পেজে কোনো এলিমেন্টে ক্লিক করলে ট্রিতে তার কম্পোনেন্ট খুঁজে পাওয়া যায়। এটা অনেকটা React DevTools বা Vue DevTools-এর মতো, তবে আপনার পেজে একটি হালকা ফ্লোটিং প্যানেল হিসেবে বিল্ট-ইন থাকে, ফলে প্রতিটি প্রজেক্টের জন্য আলাদা ফ্রেমওয়ার্ক-নির্দিষ্ট এক্সটেনশন ইনস্টল করার প্রয়োজন হয় না।
মিনিফাইড, প্রোডাকশন-বান্ডল করা সাইটেও, যেখানে কম্পোনেন্ট ও ভেরিয়েবলের নাম মেঙ্গল করা হয়েছে, ডিটেকশন কাজ করে — টুলটি readable সোর্সের ওপর নির্ভর না করে স্ট্রাকচারাল সিগনেচার খোঁজে, যে কারণে এটি এমন সাইটেও কাজ চালিয়ে যায় যেগুলো কখনো source map শিপ করেনি। বড় চারটি ফ্রেমওয়ার্কের বাইরেও, এটি Next.js এবং Nuxt-এর মতো এদের ওপর তৈরি meta-framework গুলোও চিনতে পারে এবং সেগুলোকে অন্তর্নিহিত React বা Vue রানটাইম থেকে আলাদা একটি লেয়ার হিসেবে রিপোর্ট করে। এটি একটি দ্রুত প্রথম ধাপ হয়ে ওঠে, যখনই আপনি কোনো অপরিচিত কোডবেস বা প্রতিদ্বন্দ্বীর সাইটে পৌঁছান এবং গভীরে যাওয়ার আগে বুঝতে চান আসলে আপনি কী দেখছেন।
React (Next.js, Gatsby, Remix সহ), Vue (Nuxt সহ), Angular, Svelte (SvelteKit সহ), Preact, Solid এবং অন্যান্য ফ্রেমওয়ার্ক স্বয়ংক্রিয়ভাবে শনাক্ত করে। ফ্রেমওয়ার্কের নাম, সঠিক ভার্সন নম্বর এবং রেন্ডারিং মোড (client-side, SSR, বা hybrid) দেখায়।
একটি সংকোচনযোগ্য ট্রি ভিউতে সম্পূর্ণ কম্পোনেন্ট হায়ারার্কি রেন্ডার করে। দেখুন কীভাবে টপ-লেভেল App কম্পোনেন্টের মধ্যে একটি Navbar থাকে, যাতে NavLinks থাকে এবং তার ভেতর আলাদা Link কম্পোনেন্ট থাকে। নেস্টিং ডেপথ এবং প্যারেন্ট-চাইল্ড সম্পর্ক এখানে স্ফটিকের মতো পরিষ্কার।
React এবং Vue কম্পোনেন্টের জন্য প্রতিটি কম্পোনেন্টে পাস করা বর্তমান props এবং state ভ্যালুগুলো দেখুন। দেখুন যে Dashboard কম্পোনেন্টে title="Overview", loading=false এবং columns=2 রিসিভ হচ্ছে। ডেটা ফ্লো বোঝার জন্য এটি অমূল্য।
পেজে সংশ্লিষ্ট DOM এলিমেন্টটিকে একটি রঙিন ওভারলে দিয়ে হাইলাইট করতে ট্রি প্যানেলের যেকোনো কম্পোনেন্টে ক্লিক করুন। অথবা পেজের যেকোনো এলিমেন্টে ক্লিক করে ট্রিতে এর প্যারেন্ট কম্পোনেন্টটি খুঁজে বের করুন এবং সিলেক্ট করুন। আপনার যেভাবে সুবিধা সেভাবেই নেভিগেট করুন।
পেজে রেন্ডার করা মোট কম্পোনেন্ট সংখ্যা, কতগুলো ইউনিক বনাম কতগুলো রিপিটেড ইন্সট্যান্স এবং কোন কম্পোনেন্টগুলো সবচেয়ে বেশি দেখা যাচ্ছে তা দেখুন। পেজের জটিলতা বুঝতে এবং রিইউজ প্যাটার্ন শনাক্ত করতে কার্যকর।
মিনিফাইড প্রোডাকশন বিল্ডেও ফ্রেমওয়ার্ক শনাক্ত করতে পারে। React-এর fiber tree, Vue-এর __vue__ মার্কার এবং Angular-এর ng অ্যাট্রিবিউট প্রোডাকশন মোডেও থেকে যায় — কম্পোনেন্ট ডিটেক্টর বিল্ড কনফিগারেশন যাই হোক না কেন সেগুলো পড়তে পারে।
যেকোনো ওয়েবসাইট ভিজিট করুন এবং সাথে সাথে জেনে নিন এটি React, Vue, Angular নাকি Svelte দিয়ে তৈরি — এমনকি এর সঠিক ভার্সনটিও। CDN, অ্যানালিটিক্স এবং CMS তথ্য সহ একটি পূর্ণাঙ্গ টেকনোলজি অডিটের জন্য এটিকে Site Stack-এর সাথে কম্বাইন করুন।
প্রোডাকশন অ্যাপ্লিকেশনগুলো কীভাবে তাদের UI-কে কম্পোনেন্টে বিভক্ত করে তা স্টাডি করুন। দেখুন কীভাবে Stripe তাদের প্রাইসিং পেজ স্ট্রাকচার করে, কীভাবে Linear তাদের ড্যাশবোর্ড সাজায় অথবা কীভাবে যেকোনো মানসম্মত অ্যাপ লেআউট, ন্যাভিগেশন এবং কন্টেন্টকে আলাদা কম্পোনেন্টে ভাগ করে।
একটি কম্পোনেন্ট কি ঠিকমতো রেন্ডার হচ্ছে না? এটি আসলে কী ডেটা পাচ্ছে তা দেখতে এর props এবং state ইনস্পেক্ট করুন। ডেটা ফ্লো কোথায় বিঘ্নিত হচ্ছে তা শনাক্ত করতে প্রত্যাশিত ভ্যালুর সাথে প্রকৃত ভ্যালু তুলনা করুন — console.log ছাড়াই।
ফ্রন্টএন্ড ইন্টারভিউয়ের প্রস্তুতি নিচ্ছেন? বাস্তব জগতের কম্পোনেন্ট প্যাটার্ন দেখতে প্রোডাকশন সাইটগুলো ব্রাউজ করুন — container/presentational বিভক্তিকরণ, render prop ব্যবহার, context providers এবং HOC র্যাপারগুলো এখন কম্পোনেন্ট ট্রিতে দৃশ্যমান।
ভিন্ন ফ্রেমওয়ার্ক দিয়ে তৈরি করা একই ধরনের প্রজেক্ট ভিজিট করুন এবং তাদের কম্পোনেন্ট স্ট্রাকচার তুলনা করুন। দেখুন কীভাবে একটি React অ্যাপ বনাম একটি Vue অ্যাপ একই UI প্যাটার্ন (ন্যাভিগেশন, ফর্ম, ডেটা টেবিল, মোডাল) হ্যান্ডেল করে এবং আর্কিটেকচারাল পার্থক্যগুলো বুঝুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Component Detector আইকনে ক্লিক করুন। টুলটি ফ্রেমওয়ার্ক-নির্দিষ্ট মার্কারের জন্য পেজ DOM স্ক্যান করে এবং কম্পোনেন্ট ট্রি তৈরি করে।
প্যানেল হেডারে শনাক্ত করা ফ্রেমওয়ার্ক (React, Vue, Angular, Svelte), এর ভার্সন এবং রেন্ডারিং মোড দেখানো হয়। যদি কোনো ফ্রেমওয়ার্ক শনাক্ত না হয়, তবে এটি পেজটিকে ভ্যানিলা (vanilla) HTML/CSS/JS হিসেবে রিপোর্ট করে।
হায়ারার্কি এক্সপ্লোর করতে ট্রিতে কম্পোনেন্টগুলো প্রসারিত এবং সংকুচিত করুন। কম্পোনেন্টের নামের সাথে ইন্ডেন্টেশনের মাধ্যমে তাদের নেস্টিং ডেপথ নির্দেশ করা হয়। রিপিটেড কম্পোনেন্টগুলোর জন্য ইন্সট্যান্স কাউন্ট দেখানো হয়।
নিচের ডিটেইলস সেকশনে কোনো কম্পোনেন্টের বর্তমান props এবং state ভ্যালু দেখতে ট্রিতে সেটিতে ক্লিক করুন। React-এর জন্য: props, state এবং hooks; Vue-এর জন্য: props, data এবং computed properties।
পেজে সংশ্লিষ্ট DOM এলিমেন্টটিকে একটি রঙিন বর্ডার এবং সেমি-ট্রান্সপারেন্ট ওভারলে দিয়ে হাইলাইট করতে যেকোনো কম্পোনেন্টে ক্লিক করুন। ট্রিতে এলিমেন্টটি খুঁজে পেতে পেজের কোনো এলিমেন্টে ক্লিক করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৬৪+ ডেভলপার টুল আনলক করুন।
