ব্রাউজার ডেভেলপার টুলস (browser developer tool) ব্যবহার করা

ওয়েব তৈরি খানিকটা জটিল। একারণে ওয়েব নির্মাতারা তাদের কাজের সুবিধার জন্য অনেকরকম সাহায্যকারী টুল ব্যবহার করে থাকে—এবং তাদের টুলবক্সে নতুন টুল যুক্ত করার জন্য সবসময়ই নতুন টুলের খোঁজ করতে থাকে।

বর্তমানে ব্যবহার হওয়া বেশিরভাগ ব্রাউজারগুলোতে, ব্রাউজার ডেভেলপার টুলস অন্তর্ভুক্ত রয়েছে এবং বেশিরভাগ ওয়েব ডেভেলপারদের কাছে এটা খুবই প্রিয়। প্রতিটি ব্রাউজারের টুলের ভিন্নতা রয়েছে কিন্তু ব্রাউজারগুলোর মধ্যে অমিলের চাইতে মিলটাই বেশি দেখা যায়।

একটি বেশ ভালো টুল হল একটি ওয়েবপেজে যেকোন উপাদানের উপর ডান-ক্লিক করে inspect ক্লিক করলে তা ওই উপাদানের এইচটিএমএল পর্যবেক্ষণ করে। ক্রোমে কীভাবে কাজটি করতে হয় সেটি এই ভিডিওটিতে দেখানো হয়েছে:

আরেকটি ভালো টুল হল সিএসএস পর্যবেক্ষক, এটা ব্যবহার করে একটি উপাদানে কি ধরনের বৈশিষ্ট্য ব্যবহার করা হয়েছে তা তুমি দেখে নিতে পার এবং এগুলো বিভিন্নভাবে ব্যবহারও করতে পার। ক্রোমে কীভাবে এই টুলটি ব্যবহার করতে হয় আমি সেটা এই ভিডিওটিতে দেখিয়েছি:

এই টুলগুলো ব্যবহার করার মাধ্যমে তুমি বিভিন্ন ওয়েবসাইটের গঠনপ্রকৃতি সহজেই বুঝতে পারবে এবং এটা তোমার নিজের ওয়েবসাইট ডিবাগ(debug) করতে সহায়তা করবে।

এছাড়াও আরও অনেক ধরনের টুল রয়েছে, কিন্তু শুরুর দিকে ওই দুইটি টুল ব্যবহার করে তুমি একজন ভালো ওয়েব নির্মাতা হয়ে উঠতে পারবে। এই ওয়েবপেজে একটি উপাদান তুমি inspect করে দেখতে পার এবং দেখো তুমি কি খুঁজে বের করলে!