আপনি কখনো কি চেয়েছেন জানতে আপনার প্রিয় ওয়েবসাইটগুলো কীভাবে গঠিত? একটি ব্রাউজারের "ইনস펙্ট" (Inspect) সার্ভিসগুলো একটি গোপন বরকত হতে পারে। আমরা ক্রোমের "ইনস펙্ট" টুল নিয়ে আলোচনা করেছি, এবং ফায়ারফক্সও একইরকম সুবিধা দিয়ে থাকে।
ফায়ারফক্স "ইনস্পেক্ট এলিমেন্ট" (Inspect Element) টুল আপনাকে একটি ওয়েবসাইটের অপারেশনের ভিত্তি গবেষণা করতে সাহায্য করে, এর মধ্যে থাকে HTML এবং CSS এলিমেন্ট যা এটি ব্যবহার করে, নেটওয়ার্কে এর লোড, এর লোডিং এলিমেন্টের ল্যাটেন্সি (latency), এবং এটি স্টোরেজে যে ফাইলগুলো রাখে—যেমন কুকি (cookies)।
অনুভবী ডেভেলপাররা এখানে নতুন কিছু না পাওয়া গেলেও, নовичরা এবং সাধারণ ওয়েব ইউজাররা ফায়ারফক্সের একটি নতুন, শক্তিশালী দিক এবং ইন্টারনেটের প্রতিটি সাইটের নিচে থাকা ফাইল ও অপারেশনের গভীর কূপটি আবিষ্কার করবেন।
ইনস্টলেশন
আপনি যদি ফায়ারফক্স ব্যবহার করেন, তবে আর কিছু করতে হবে না। আপনি যদি ফায়ারফক্স ব্যবহার শুরু করতে চান, এবং আপনি উইন্ডোজ, লিনাক্স, ম্যাক, আইওএস (iOS), বা অ্যান্ড্রয়েড (Android)-এ থাকেন, তবে লেটেস্ট ভার্সন পেতে এই লিংকে যান। ডাউনলোড করা ইনস্টলার ফাইলগুলো সাধারণভাবে ইনস্টল করুন ডাবল-ক্লিক করে বা ট্যাপ করে যদি আপনি স্মার্টফোনে থাকেন।
প্রমুখ লিনাক্স ডিস্ট্রোর অধিকাংশে ফায়ারফক্স প্রি-ইনস্টলড থাকে অথবা তাদের সফটওয়ার সেন্টার/প্যাকেজ রিপোজিটরিতে কপি থাকে যা ব্যবহারকারী সহজে ইনস্টল করতে পারেন।
"ইনস্পেক্ট এলিমেন্ট" খোলা
ফায়ারফক্স ইনস্টল করার পর, আপনি এর ইন্সপেক্টর পেতে পারেন একটি ওয়েবপেজের যেকোনো এলিমেন্টে রাইট-ক্লিক করে। এতে নিচের ск্রিনশটের মতো একটি ড্রপডাউন মেনু দেখাবে যেখানে "Inspect Element" তালিকার নিচের দিকে অবস্থিত।
ইন্সপেক্টর (Inspector)
"Inspect Element" ক্লিক করলেই আপনার স্ক্রিনের নিচে ইন্সপেক্টর খুলবে। এই মুহূর্তে টাইটেলগুলো একটু ম giocatore হয়ে যায় কারণ ইন্সপেক্টর টেকনিক্যালি এর সার্ভিসের "Inspector" অংশটি খুলেছে।
어찌 হোক, আপনি যে এলিমেন্টে ক্লিক করেছিলেন সেটি টুলের মাঝখানে দেখাবে, এবং যখন আপনি সেটির ওপর মাউস ঘুরাবেন—যেমন নিচের স্ক্রিনশটে আমি <div> ট্যাগের ওপর হোভার করছি—"Inspector" সেটি ওয়েবপেজে ভিজ্যুয়ালি হাইলাইট করবে।
এটি সহজ করে দেয় আপনি কী এলিমেন্ট দেখছেন সেটা জানতে। এছাড়া সেই এলিমেন্টের বিভিন্ন প্রোপার্টি খুঁজে বের করাও সহজ হয়। আপনি "Inspector"-এর ডান পাশে তাকালে, আপনি সেই নির্দিষ্ট <div> ট্যাগের প্রোপার্টি দেখবেন, যার মধ্যে আছে মার্জিন (margin), প্যাডিং (padding), বর্ডার (border), ফন্ট সাইজ (font size), এবং ভার্টিক্যাল এলাইনমেন্ট (vertical alignment) এর সেটিংস।
আপনি যদি ডান প্যানেলটি স্ক্রোল করেন, তবে আপনি দেখবেন এটি অন্যান্য এলিমেন্ট থেকে উত্তরাধিকারসুত্রে প্রাপ্ত প্রোপার্টিগুলো। আপনি এমনকি সেই উইন্ডোতে প্রোপার্টিগুলো পরিবর্তন করতে পারেন এবং সেগুলো রিয়েল-টাইমে ওয়েবপেজে প্রদর্শিত হবে।
স্টাইল এডিটর (Style Editor)
আপনি ইন্সপেক্টরের উপরের টুলবার ফলো করে ক্যাসকেডিং স্টাইল শীটস (CSS) এর রাজ্যে যেতে পারেন। "Style Editor" লেখা জায়গায় ক্লিক করুন একটি নতুন ডায়লগ খোলার জন্য যা আপনার স্ক্রিনের নিচে তিনটি নতুন প্যানেল দেখাবে।
এখানে আপনি ডাকডাকগো (DuckDuckGo) যে দুটি স্টাইল শীট ফাইল ব্যবহার করে সেটা দেখতে পাবেন, প্রথম সিলেক্ট করা স্টাইল শীটের এলিমেন্টগুলো, এবং সেই শীটের বিভিন্ন "@media" রুলস (rules), যা রেসপনসিভ ডিজাইন গভর্ন করে ছোট ও বড় স্ক্রিনের জন্য।
আপনি এই স্টাইল শীটগুলো এডিট করতে পারেন ঠিক "Inspector" সেকশনের মতো। এই কেসে 규칙 খুব বেশি—প্রথম স্টাইল শীটে একলাখ ছব্বিশ হাজার দুশত সাত (১২৬২) টি রুল।
আপনি টুলবারে আরও 나아가 "Network Monitor" তে যেতে পারেন, যেখানে আপনি ওয়েবসাইটের সেই ফাইলগুলো জন্য রিকোয়েস্ট এবং তাদের স্ট্যাটাস পাবেন। অন্যান্য এলিমেন্ট যেমন ইমেজ এবং ফন্টও সেটিতে থাকতে পারে, এবং আপনি সকল রিকোয়েস্ট এবং প্রসেস হওয়ার পর প্রতিটি ফাইলের সাইজ দেখতে পারবেন।
পারফরম্যান্স (Performance)
"Performance" ট্যাব খোলার পর, আপনাকে "Start Recording Performance" বাটনে ক্লিক করতে হবে ইনস্পেক্টরকে তথ্য সংগ্রহ করতে দিতে। কয়েক সেকেন্ডে এটি ডিসকভার করবে আপনার পেজ কত ফ্রেম-পার-সেকেন্ড (FPS) এ চলে, ডকুমেন্ট অবজেক্ট মডেল (DOM) ইভেন্টগুলো যা ঘটেছে, এবং স্টাইল রি-ক্যালকুলেশন (style recalculations), পাশাপাশি সময় (সাধারণত মিলিসেকেন্ডে) যা সেগুলো লোড হতে লাগল।
এই সাইটের জন্য আপনি দেখতে পাবেন হাইলাইট করা DOM ইভেন্ট, একটি মাউসওভার (mouseover), ৬.০৩ মিলিসেকেন্ড সময় নিলো লোড হতে। এই পেজের গড় FPS ছিল প্রায় ৩৯। এবং আমার রেসপন্স টাইমের রেঞ্জ দেখানোর চার্ট ৯০০০ মিলিসেকেন্ড পর্যন্ত পৌঁছিয়েছে কিছু ইভেন্টের জন্য।
মেমরি (Memory)
"Memory" ট্যাবে আপনাকে একটি বাটনে ক্লিক করতে হবে—"Take Snapshot"—তথ্য সংগ্রহ করতে। আমার কেসে, এটি ইভেন্টের একটি ম্যাপ জেনারেট করেছিল যা প্রায় ৬০০ KB স্ট্রিংস (strings), ১ MB অবজেক্টস (objects), এবং ১ MB স্ক্রিপ্টস (scripts) মেমরিতে আসছেন দেখাচ্ছে। আপনি সেই একই এলিমেন্টগুলো কয়েক ভিন্ন ভাবে ভিউ করতে পারেন ড্রপডাউন মেনুতে ক্লিক করে যেখানে "Tree Map" লেখা থাকে, স্ক্রিনশটে দেখানো মতো।
স্টোরেজ (Storage)
শেষে, আপনি যদি "Storage" ট্যাবে ক্লিক করেন, তবে আপনি দেখতে পাবেন একটি ওয়েবসাইট আপনার কম্পিউটারে স্থায়ীভাবে যে ফাইলগুলো রাখতে পারে। অধিকাংশ ব্যবহারকারীর জন্য প্রাসঙ্গিক, এতে কুকি (cookies) থাকে। আপনি নিচের ছবিতে একটি লোড করা কুকি দেখতে পারেন।
আপনি ডান প্যানেলে দেখতে পাবেন এই নির্দিষ্ট কুকি আগামী দশকের মাঝপথে এক্সপায়ার হবে এবং আমি এটিকে এই আর্টিকেল লেখার সেশনে অ্যাক্সেস করেছিলাম।
উপসংহার
ফায়ারফক্স ইন্সপেক্টর ব্যবহার করার সময় অনেক কিছু ভেড়ানো থাকে। এর একাধিক অংশের এই পরিচিতি আপনাকে কিছুক্ষণ ব্যস্ত রাখবে।
কিছু সময় ব্যয় করুন একটি সাইটের HTML এলিমেন্ট পরিবর্তন করতে। কয়েকটি আলাদা ওয়েবসাইট ভিজিট করুন তাদের লোডিং টাইম দেখতে। জানুন একটি নির্দিষ্ট পেজ আপনার মেশিনে কত কুকি স্টোর করতে চায়। কখনো কখনো, সেই তথ্যটি আপনাকে চিন্তা করতে বাধ্য করতে পারে।
আশা করি, এই আবিষ্কারের যাত্রা আপনাকে আরও ভালো বোঝার সুযোগ দেবে যে ওয়েবসাইটগুলো কী করে যাতে সেগুলো আপনার আশা অনুযায়ী ফাংশন করে। এটি আপনার পূর্বের ধারণার চেয়ে অনেক বেশি হতে পারে।
