গুগল ক্রোম শুধু একটি ফাস্ট কনজিউমার ব্রাউজার নয়—এটির হুডের নিচে ডেভেলপার ফিচারের একটি জুতশোনা লুকিয়ে আছে। "ইনস্পেক্ট" (Inspect) টুল ব্যবহার করে আপনি এই শক্তির কিছু हिसসা উন্মোচন করতে পারেন। শুরুতে এটি আতঙ্কিত করতে পারে, কিন্তু এই টুল আপনাকে ওয়েবসাইট কীভাবে নির্মিত হয়েছে সেটি বোঝার সুযোগ দেয় এবং আপনার নিজের সাইট ডিবাগ করতে সাহায্য করে।
ইনস্পেক্ট টুল অ্যাক্সেস করা
ইনস্পেক্ট টুল ক্রোমের কন্টেক্সট মেনুতে পাওয়া যায়।
ব্রাউজারে যেকোনো এলিমেন্টের ওপর রাইট-ক্লিক করুন এবং কন্টেক্সট মেনুতে "Inspect"-এ ক্লিক করুন।
ক্রোম ব্রাউজারের পাশ থেকে একটি উইন্ডো পপ আউট হবে। এটিকে DevTools প্যানেল বলা হয়। আপনি যদি ফায়ারফক্সে Firebug ব্যবহার করে থাকেন, তবে কিছু অংশ আপনি চিনতে পারেন।
এখানে অনেক কিছু আছে, তাই আলাদা আলাদা টুকরো দেখা যাক।
ইনস্পেক্টরটি পরিদর্শন
ইনস্পেক্ট প্যানেল কিছু ট্যাবে ভাগ করা আছে যা উইন্ডোর উপরে দেখা যায়। আমরা ডিফল্ট Elements ট্যাবে ফোকাস করব।
এই ট্যাবের পাশে দুটি উপকারী বাটন আছে। প্রথমটি হল Inspect Element টুল।
এই টুল আপনাকে মাউস ঘুরিয়ে ভিন্ন DOM এলিমেন্ট সিলেক্ট করে ইনস্পেক্ট করতে দেয়।
দ্বিতীয় বাটন Device Preview মোড অন করে। এই মোডে আপনি দেখতে পারেন আপনার ওয়েবপেজ ভিন্ন রেজোলিউশন ও স্ক্রিন সাইজে কীভাবে দেখাবে।
যদি আপনি সেটি ক্লিক করেন, আপনার ওয়েবপেজ একটি নতুন ভিউতে স্ন্যাপ হবে।
পেজ প্রিভিউর উপরের ড্রপ-ডাউন মেনু বা পেজ প্রিভিউর সাইডের হ্যান্ডেল ব্যবহার করে ডিভাইস প্রিভিউ উইন্ডো রিসাইজ করা যায়।
HTML ভিউ
DevTools ট্যাবের অধিকাংশ부분 HTML পেইন দখল করেছে।
এই পেইন একটি সুপার-পাওয়ারড "View Source" এর মতো। এটি DOM অনুযায়ী স্ট্রাকচার্ড, যেখানে এলিমেন্টগুলো তাদের প্যারেন্ট এলিমেন্টের ভিতরে নেস্টেড থাকে।
আপনি দেখবেন যে শুরুতে আপনি যে এলিমেন্টটি "ইনস্পেক্ট" করেছিলেন সেটি স্লেটি বা নীল ব্যাকগ্রাউন্ডের সাথে হাইলাইটেড। এখানে আমি একটি ইমেজ ইনস্পেক্ট করলাম যা একটি লিংকের ভিতরে আছে। প্রত্যাশা অনুযায়ী, আমি একটি হাইলাইটেড অ্যাঙ্কর ট্যাগ দেখছি।
আমার ইমেজ কোথায়? অ্যাঙ্কর ট্যাগের পাশের ডিসক্লোজার ট্রায়্যাঙ্গেলে ক্লিক করলে নেস্টেড DOM এলিমেন্টগুলো দেখা যাবে। এই কেসে অ্যারোটি আমার প্রত্যাশিত ট্যাগটি প্রকাশ করল।
HTML পেইনের নিচে একটি ছোট মেনু বার ও আছে।
এটিকে ব্রেডক্রাম্ব ট্রেইল বলা হয়, এবং এটি সিলেক্টেড এলিমেন্টের সকল প্যারেন্ট এলিমেন্ট দেখায়। সেগুলোর যেকোনো একটি ক্লিক করলে সেটিতে নেভিগেট করা যায়।
স্টাইলস (Styles)
HTML ভিউর নিচে আমরা একটি পেইন দেখি যা আমাদের এলিমেন্টে প্রয়োগ্য যেকোনো CSS রুল দেখায়। এটাকে Styles পেইন বলা হয়, এবং এই কেসে আমরা অ্যাঙ্কর ট্যাগে প্রয়োগ্য সব রুল দেখছি।
আপনি যেকোনো রুল হովার করে এর পাশের চেকবক্সে ক্লিক করে অন/অফ করতে পারেন।
পেজ প্রিভিউতে পরিবর্তনটি তৎক্ষণাৎ দেখা যাবে। এবং আপনি সরাসরি রুলে ক্লিক করলে এর নাম ও ভ্যালু পরিবর্তন করতে পারেন।
ফিল্টার সার্চ বক্স ব্যবহার করে নির্দিষ্ট রুল সার্চ করাও যায়।
Styles পেইন এর ক্ষমতা এতটুকু নয়। Google-এর ডকুমেন্টেশন দেখুন সম্পূর্ণ ব্যাখ্যা পাওয়ার জন্য।
বক্স মডেল এবং কম্পিউটেড স্টাইল
স্টাইল ভিউর পাশে আমার সিলেক্টেড এলিমেন্টের বক্স মডেল আছে। আপনি যদি পরিচিত না হন, বক্স মডেল হল মার্জিন, বর্ডার, প্যাডিং, এবং কন্টেন্ট সাইজের একটি এবস্ট্রাক্ট চিত্রণ।
এই কেসে আমি দেখি আমার এলিমেন্টের প্রাইমারি সাইজ ৪৬১ x ২০৯ পিক্সেল। এতে কোনো মার্জিন, বর্ডার, বা প্যাডিং রুল নেই, তাই সেগুলো ব্লাঙ্ক।
আপনি যদি পজিশন, মার্জিন, বর্ডার, বা প্যাডিং রুলযুক্ত এলিমেন্ট বেছে নেন, তবে আপনার বক্স মডেল এরকম দেখতে পারে।
আপনি Inspect Element টুল অন করে DOM এলিমেন্টের ওপর মাউস ঘুরালে in situ বক্স মডেলও দেখতে পারেন।
বক্স মডেলের নিচে এই নির্দিষ্ট এলিমেন্টে প্রয়োগ্য সব স্টাইলিং রুলের একটি লিস্ট আছে। এটি Styles পেইন থেকে কিছুটা ভিন্ন। এখানে CSS-এর একচুটি লাইন দেখায় না—শুধু সেই রুলগুলোর ইফেক্ট। এটিকে অবজেক্টের "কম্পিউটেড স্টাইল" বলা হয়, এবং এটি আপনার CSS-এর কম্বাইনড ফলাফল।
অবশেষে, ফিল্টার বক্সে টাইপ করে নির্দিষ্ট রুল সার্চ করা যায়।
উপসংহার
আপনি যদি ওয়েব পেজের সাথে ঘন ঘন কাজ করেন, ক্রোমের Inspect টুল এক্সপ্লোর করার উপযোগী। এবং DevTools-এ অন্য ট্যাবগুলো, যেমন Console এবং Network, ডেভেলপারদের জন্য অনমোল হতে পারে। এখানে সব কিছু কভার করা সম্ভব নয়, কিন্তু Google-এর নিজস্ব ডকুমেন্টেশন সমৃদ্ধ ও উপকারী।
