পেজ আউটলাইনার যেকোনো ওয়েবপৃষ্ঠার সম্পূর্ণ DOM স্ট্রাকচারকে একটি ভিজ্যুয়াল ট্রি ওভারলে হিসেবে রেন্ডার করে — সরাসরি পেজের ওপরই। প্রতিটি HTML এলিমেন্ট একটি রঙিন লেবেল পায় যা এর ট্যাগ নাম দেখায় এবং ইন্ডেন্টেশন ও সংযোগকারী লাইনের মাধ্যমে নেস্টিং ডেপথ (কতটা গভীরে আছে) বোঝা যায়। এটি অনেকটা ডেভ-টুলের Elements প্যানেল দেখার মতো, তবে এটি সরাসরি লাইভ পেজের ওপর প্রোজেক্ট করা হয়।
ব্রাউজার ডেভ-টুল DOM-কে একটি সাইড প্যানেলে টেক্সট ট্রি হিসেবে দেখায়, যা ভিজ্যুয়াল লেআউট থেকে বিচ্ছিন্ন থাকে। পেজ আউটলাইনার সরাসরি পেজের ওপর DOM স্ট্রাকচার প্রোজেক্ট করে এই ব্যবধান কমায়। প্রতিটি এলিমেন্ট একটি ছোট রঙিন ব্যাজ পায় যা এর ট্যাগ নাম (div, section, nav, h1, p, button ইত্যাদি) দেখায়, যা এলিমেন্টের ওপর-বামে পজিশন করা থাকে। নেস্টেড এলিমেন্টগুলো ভিজ্যুয়ালি ইন্ডেন্টেড থাকে এবং ট্রি-সদৃশ স্ট্রাকচারটি সাথে সাথে স্পষ্ট হয়ে ওঠে। এটি এক নজরে একটি পেজ কীভাবে তৈরি হয়েছে তা বোঝা অবিশ্বাস্যভাবে সহজ করে তোলে — আপনি দেখতে পাবেন যে হেডারের মধ্যে একটি ন্যাভিগেশন আছে যাতে পাঁচটি অ্যাঙ্কর ট্যাগ রয়েছে, মেইন কন্টেন্টে তিনটি সেকশন এলিমেন্ট আছে এবং ফুটার একটি লোগো div ও লিঙ্কের তালিকার একটি র্যাপার হিসেবে কাজ করছে। ডেভ-টুল ওপেন না করেই বা র (raw) HTML সোর্স কোড না পড়েই এই সব করা সম্ভব।
পেজের প্রতিটি দৃশ্যমান এলিমেন্ট একটি রঙিন ট্যাগ ব্যাজ ওভারলে পায় যা এর HTML ট্যাগ নাম দেখায়। বাইরের html এবং body এলিমেন্ট থেকে শুরু করে একদম ভেতরের span, লিঙ্ক এবং বোতাম পর্যন্ত — কিছুই লুকানো থাকে না। ওভারলেটি এলিমেন্টের সম্পূর্ণ হায়ারার্কিকে একটি ভিজ্যুয়াল ম্যাপ হিসেবে রেন্ডার করে।
প্রতিটি এলিমেন্ট টাইপের ব্যাজের জন্য একটি আলাদা ব্যাকগ্রাউন্ড কালার থাকে। স্ট্রাকচারাল এলিমেন্ট (header, main, footer) নীল রঙে, ন্যাভিগেশন আম্বার (amber) রঙে, হেডিং বেগুনী রঙে, প্যারাগ্রাফ ধূসর রঙে, লিঙ্ক হলুদ রঙে, বোতাম সায়ান রঙে এবং ছবি গোলাপি রঙে। আপনি টেক্সট না পড়েই রঙের মাধ্যমে এলিমেন্ট টাইপ শনাক্ত করতে পারবেন।
প্রাসঙ্গিক এলিমেন্টটিকে হাইলাইট করতে যেকোনো ট্যাগ ব্যাজের ওপর হোভার করুন, যা এর সঠিক ডাইমেনশন (পিক্সেল অনুযায়ী উইডথ × হাইট) সহ একটি সেমি-ট্রান্সপারেন্ট ওভারলে দেখাবে। এলিমেন্ট বাউন্ডারি আউটলাইন করা হয় এবং ব্যাজটি আরও স্পষ্ট হয়ে ওঠে — যা কোন ব্যাজ কোন এলিমেন্টের তা শনাক্ত করা সহজ করে তোলে।
গভীরভাবে নেস্টেড এলিমেন্টগুলো বাম দিক থেকে আরও দূরে ইন্ডেন্টেড থাকে, যা নেস্টিং রিলেশনশিপ সাথে সাথে দৃশ্যমান করে তোলে। এক নজরে দেখুন কোনো পেজে খুব বেশি র্যাপার div (৫+ লেভেল গভীর) আছে কি না নাকি এটি একটি পরিষ্কার, অগভীর স্ট্রাকচার। সংযোগকারী লাইনগুলো প্যারেন্ট-চাইল্ড সম্পর্ক দেখায়।
ওভারলেগুলো অ্যাবসলিউটলি পজিশন করা থাকে এবং পেজ লেআউট, স্ক্রলিং বা জাভাস্ক্রিপ্ট ব্যবহারে কোনো প্রভাব ফেলে না। ব্যাজ লেবেলগুলো ছোট এবং সেমি-ট্রান্সপারেন্ট থাকে যাতে আপনি নিচে পেজের কন্টেন্ট দেখতে পান। স্বাভাবিক অবস্থায় ফিরতে সাথে সাথে টগল অফ করুন।
যেকোনো কন্টেইনার এলিমেন্টের ব্যাজে ক্লিক করে এর চাইল্ড এলিমেন্টগুলোকে কোলাপ্স (সংকোচন) করুন, যা নেস্টেড ব্যাজগুলোকে লুকিয়ে ফেলবে। সম্পূর্ণ পেজের DOM ট্রি দেখে বিভ্রান্ত না হয়ে নির্দিষ্ট কোনো সেকশনে ফোকাস করার জন্য এটি কার্যকর। আবার প্রসারিত করতে ক্লিক করুন।
কোনো জটিল ওয়েবপৃষ্ঠায় এসেছেন এবং এটি কীভাবে তৈরি হয়েছে তা বুঝতে হবে? পেজ আউটলাইনার আপনাকে এক নজরে সম্পূর্ণ DOM হায়ারার্কি দেখায় — কোন সেকশনে কোন কন্টেন্ট আছে, ন্যাভিগেশন কীভাবে স্ট্রাকচার করা হয়েছে এবং মেইন কন্টেন্ট এরিয়া কোথায় শুরু ও শেষ হয়েছে।
অতিরিক্ত div নেস্টিং CSS লেখা কঠিন করে তোলে এবং পেজ রেন্ডারিং স্লো করে দেয়। আপনি যদি সাধারণ কোনো টেক্সট ব্লকের জন্য ৬ বা তার বেশি লেভেলের রঙিন ব্যাজ একে অপরের ওপর সজ্জিত দেখেন, তবে মার্কআপটি সরল করা প্রয়োজন। পেজ আউটলাইনার এটি সাথে সাথে স্পষ্ট করে তোলে।
পেজটি কি সঠিক সেমান্টিক এলিমেন্ট ব্যবহার করছে? header, nav, main, article, section এবং footer ব্যাজগুলো খুঁজুন। যদি সবকিছুই কেবল div এলিমেন্ট হয়, তবে পেজটিতে সেমান্টিক স্ট্রাকচারের অভাব রয়েছে — যা অ্যাক্সেসিবিলিটি, SEO এবং মেইনটেনাবিলিটির ক্ষতি করে।
যেকোনো উন্নত মানের ওয়েবসাইট (Stripe, Linear, Vercel) ভিজিট করুন এবং তাদের ফ্রন্টএন্ড টিম কীভাবে তাদের HTML স্ট্রাকচার করে তা দেখতে Page Outliner সক্রিয় করুন। প্রোডাকশন পেজগুলোতে বাস্তব জগতের DOM স্ট্রাকচার দেখে লেআউট প্যাটার্ন শিখুন।
প্ৰথমে পেজ আউটলাইনার ব্যবহার করে কোন এলিমেন্টগুলোর অস্তিত্ব আছে এবং সেগুলো কোথায় আছে তা শনাক্ত করুন, তারপর আপনার শনাক্ত করা নির্দিষ্ট এলিমেন্টগুলো আরও গভীরভাবে পরীক্ষা করতে CSS Inspector বা Measure Distance-এ স্যুইচ করুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Page Outliner আইকনে ক্লিক করুন। টুলটি সাথে সাথে পেজ DOM স্ক্যান করে এবং প্রতিটি দৃশ্যমান এলিমেন্টে ট্যাগ ব্যাজ রেন্ডার করে।
প্রতিটি এলিমেন্টের ওপর-বামে রঙিন ব্যাজ প্রদর্শিত হয় যা এর ট্যাগ নাম (div, section, h1, p ইত্যাদি) দেখায়। ইন্ডেন্টেশন এবং ব্যাজ পজিশনিংয়ের মাধ্যমে নেস্টিং স্ট্রাকচার দৃশ্যমান হয়।
প্রাসঙ্গিক এলিমেন্টটিকে হাইলাইট করতে যেকোনো ব্যাজের ওপর মাউস নিয়ে যান। একটি সেমি-ট্রান্সপারেন্ট ওভারলে এলিমেন্টের সীমানা এবং ডাইমেনশন দেখাবে। এটি বিমূর্ত ট্যাগ নামের সাথে পেজে এর ভিজ্যুয়াল পজিশনের সংযোগ তৈরি করে।
চাইল্ড এলিমেন্টের ব্যাজগুলো লুকাতে কন্টেইনার ব্যাজে ক্লিক করুন। এটি আপনাকে গভীরভাবে নেস্টেড এলিমেন্টের ভিজ্যুয়াল ক্লাটার ছাড়াই পেজের নির্দিষ্ট অংশে ফোকাস করতে সহায়তা করে।
সব ওভারলে সরিয়ে ফেলতে এবং স্বাভাবিক পেজ ভিউতে ফিরতে ডকের Page Outliner আইকনে ক্লিক করুন। কোনো চিহ্ন বাকি থাকবে না।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
