কম্পোনেন্ট ডিটেক্টর স্বয়ংক্রিয়ভাবে শনাক্ত করে যে একটি ওয়েবসাইট কোন ফ্রন্টএন্ড ফ্রেমওয়ার্ক ব্যবহার করছে এবং এর সম্পূর্ণ কম্পোনেন্ট ট্রি প্রকাশ করে। React, Vue, Angular এবং Svelte কম্পোনেন্টের নাম, তাদের props/state ভ্যালু এবং নেস্টিং হায়ারার্কি দেখুন — সবই একটি একক ইনস্পেকশন প্যানেল থেকে।
কখনও কি ভেবে দেখেছেন একটি ওয়েবসাইট কোন ফ্রেমওয়ার্ক দিয়ে তৈরি? অথবা দেখতে চেয়েছেন কীভাবে একটি জটিল UI কম্পোনেন্টে বিভক্ত হয়েছে? কম্পোনেন্ট ডিটেক্টর এই দুটি প্রশ্নেরই সাথে সাথে উত্তর দেয়। এটি পেজটি ফ্রেমওয়ার্ক-নির্দিষ্ট সিগনেচারের (যেমন React fiber nodes, Vue component instances, Angular zone markers, Svelte component metadata) জন্য স্ক্যান করে এবং ফ্রেমওয়ার্ক, এর ভার্সন এবং সম্পূর্ণ কম্পোনেন্ট ট্রি শনাক্ত করে। React এবং Vue-এর জন্য এটি আরও গভীরে যায় — কম্পোনেন্ট props এবং state ভ্যালু দেখায় যাতে আপনি বুঝতে পারেন কোন ডেটা UI-এর প্রতিটি অংশ পরিচালনা করছে। পেজে সংশ্লিষ্ট DOM এলিমেন্ট হাইলাইট করতে ট্রিয়ের যেকোনো কম্পোনেন্টে ক্লিক করুন অথবা ট্রিতে সংশ্লিষ্ট কম্পোনেন্টটি খুঁজে পেতে পেজের কোনো এলিমেন্টে ক্লিক করুন। এটি অনেকটা React DevTools বা Vue DevTools-এর মতো, তবে এটি আপনার পেজে একটি হালকা ফ্লোটিং প্যানেল হিসেবে বিল্ট-ইন থাকে।
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 ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
