আপনি যদি কখনও জানতে চান যে আপনার প্রিয় ওয়েবসাইটগুলি কীভাবে গঠন করা হয়, একটি ব্রাউজারের "পরিদর্শন" পরিষেবাগুলি একটি লুকানো আশীর্বাদ হতে পারে৷ আমরা ক্রোমের "পরিদর্শন" টুল কভার করেছি, এবং ফায়ারফক্সও একই ধরনের অফার নিয়ে আসে।
ফায়ারফক্স “ইন্সপেক্ট এলিমেন্ট” টুল আপনাকে ওয়েবসাইটের ক্রিয়াকলাপের আন্ডারপিনিংগুলি তদন্ত করতে সাহায্য করতে পারে, যার মধ্যে এটি যে HTML এবং CSS উপাদানগুলি ব্যবহার করে, নেটওয়ার্কে এর লোড, এর লোডিং উপাদানগুলির লেটেন্সি এবং এটি স্টোরেজে রাখা ফাইলগুলি যেমন কুকিজ।
অভিজ্ঞ বিকাশকারীরা এই প্রাইমারটিতে খুব বেশি নতুন খুঁজে পাবেন না। নবীন এবং দৈনন্দিন ওয়েব ব্যবহারকারীদের, তবে, Firefox-এর ক্ষমতার একটি নতুন, শক্তিশালী দিক খুঁজে বের করা উচিত এবং ফাইল এবং ক্রিয়াকলাপগুলির একটি গভীর কূপ খুঁজে পাওয়া উচিত যা ইন্টারনেটের প্রতিটি সাইটের নীচে থাকে৷
ইনস্টলেশন
আপনি যদি ফায়ারফক্স ব্যবহার করেন তাহলে আপনাকে আর কিছু করতে হবে না। আপনি যদি Firefox ব্যবহার শুরু করতে চান এবং আপনি Windows, Linux, Mac, iOS বা Android ব্যবহার করেন, তাহলে ব্রাউজারের সর্বশেষ সংস্করণটি খুঁজতে এই লিঙ্কটি অনুসরণ করুন। ডাউনলোড করা ইন্সটলার ফাইলগুলিকে আপনি সাধারণত যেভাবে করতে চান সেগুলিতে ডাবল ক্লিক করে বা আপনি যদি স্মার্টফোনে থাকেন তবে ট্যাপ করে ইনস্টল করুন৷
প্রধান লিনাক্স ডিস্ট্রো সম্ভবত ফায়ারফক্সের সাথে প্রি-ইন্সটল করা আছে বা তাদের সফটওয়্যার সেন্টার/প্যাকেজ রিপোজিটরিতে ফায়ারফক্সের কপি আছে যা ব্যবহারকারী সহজেই ইনস্টল করতে পারে।
"ইন্সপেক্ট এলিমেন্ট" খোলা হচ্ছে
ফায়ারফক্স ইন্সটল করার পর, আপনি ওয়েবপেজের যেকোন এলিমেন্টে ডান-ক্লিক করে এর পরিদর্শক খুঁজে পেতে পারেন। এটি আপনাকে একটি ড্রপডাউন মেনু দেখাবে যেমন নীচের ছবি যেখানে "উপাদান পরিদর্শন" তালিকার নীচে অবস্থিত।
ইন্সপেক্টর
"ইন্সপেক্ট এলিমেন্ট" এ ক্লিক করলে সাথে সাথে আপনার স্ক্রিনের নীচে ইন্সপেক্টর খুলবে। এই মুহুর্তে শিরোনামগুলি কিছুটা ঝাপসা হয়ে যায় কারণ পরিদর্শক প্রযুক্তিগতভাবে তার পরিষেবাগুলির "ইন্সপেক্টর" অংশটি খুলবেন৷
যাই হোক না কেন আপনি যে উপাদানটিতে ক্লিক করেছেন সেটি টুলের মাঝখানে প্রদর্শিত হবে এবং যখন আপনি সেই উপাদানটির উপর আপনার মাউস চালাবেন - যেমন <div> নীচের স্ক্রিনশটে ট্যাগ করুন - "ইন্সপেক্টর" ওয়েবপৃষ্ঠাতেই আপনার স্ক্রিনে সেই ভিজ্যুয়াল উপাদানটিকে হাইলাইট করবে৷
এটি আপনি কোন উপাদানগুলি দেখছেন তা জানা সহজ করে তোলে। এটি সেই উপাদানগুলির বিভিন্ন বৈশিষ্ট্য খুঁজে পাওয়া সহজ করে তোলে। আপনি যদি "ইন্সপেক্টর" এর ডান দিকে তাকান, তাহলে আপনি সেই নির্দিষ্ট <div> এর বৈশিষ্ট্য দেখতে পাবেন ট্যাগ, এর মার্জিন, প্যাডিং, সীমানা, ফন্টের আকার এবং উল্লম্ব প্রান্তিককরণের সেটিংস সহ।
আপনি যদি সেই ডান-পাশের প্যানেলের মাধ্যমে স্ক্রোল করেন, আপনি অন্যান্য উপাদান থেকে উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যগুলি দেখতে পাবেন। এমনকি আপনি সেই উইন্ডোতে বৈশিষ্ট্যগুলি পরিবর্তন করতে পারেন এবং সেগুলিকে রিয়েল টাইমে ওয়েবপেজে উপস্থিত দেখতে পারেন৷
স্টাইল এডিটর
আপনি পরিদর্শকের শীর্ষে টুলবার অনুসরণ করে ক্যাসকেডিং স্টাইল শীট (সিএসএস) এর রাজ্যে আপনার যাত্রা চালিয়ে যেতে পারেন। আপনার স্ক্রিনের নীচে তিনটি নতুন প্যানেল দেখায় এমন একটি নতুন সংলাপ খুলতে যেখানে এটি "স্টাইল এডিটর" বলে সেখানে ক্লিক করুন৷
এখানে আপনি DuckDuckGo ব্যবহার করা দুটি স্টাইল শীট ফাইল, প্রথম নির্বাচিত স্টাইল শীটের উপাদান এবং সেই শীটের বিভিন্ন “@media” নিয়মগুলি দেখতে পাবেন, যা ছোট এবং বড় পর্দার জন্য প্রতিক্রিয়াশীল ডিজাইন পরিচালনা করে।
আপনি এই স্টাইল শীটগুলিকে "ইন্সপেক্টর" বিভাগে সম্পাদনা করতে পারেন। এই ক্ষেত্রে বেছে নেওয়ার জন্য অনেক নিয়ম রয়েছে – শুধুমাত্র প্রথম স্টাইল শীটে 1262টি নিয়ম।
আপনি যদি টুলবারে "নেটওয়ার্ক মনিটর"-এ আরও নেভিগেট করেন, তাহলে আপনি সেই ফাইলগুলি এবং তাদের স্থিতিগুলির জন্য ওয়েবসাইটের অনুরোধগুলি খুঁজে পাবেন৷ অন্যান্য উপাদান যেমন চিত্র এবং ফন্টগুলিও সেই ট্যাবে উপস্থিত থাকতে পারে এবং আপনি সেই সমস্ত অনুরোধগুলি এবং অনুরোধটি প্রক্রিয়া করার পরে প্রতিটি ফাইলের আকার দেখতে পারেন৷
পারফরম্যান্স
আপনি যখন "পারফরম্যান্স" ট্যাবটি খুলবেন, তখন পরিদর্শক তথ্য সংগ্রহ করতে আপনাকে "স্টার্ট রেকর্ডিং পারফরম্যান্স" বোতামে ক্লিক করতে হবে। কয়েক সেকেন্ডের মধ্যে এটি আবিষ্কার করবে যে আপনার পৃষ্ঠাটি ফ্রেম-প্রতি-সেকেন্ডে (FPS) চলছে, ডকুমেন্ট অবজেক্ট মডেল (DOM) ইভেন্টগুলি ঘটেছিল এবং স্টাইল পুনঃগণনা, সেই সময় (সাধারণত মিলিসেকেন্ডে) যে সময়ে এটি সেই উপাদানগুলি নিয়েছিল। লোড।
এই সাইটের জন্য আপনি হাইলাইট করা DOM ইভেন্ট দেখতে পাচ্ছেন, একটি মাউসওভার, লোড হতে 6.03 মিলিসেকেন্ড সময় নেয়। এই পৃষ্ঠার জন্য গড় FPS ছিল প্রায় 39৷ এবং চার্টটি কিছু ইভেন্টের জন্য আমার প্রতিক্রিয়ার সময়সীমা 9000 মিলিসেকেন্ডে পৌঁছেছে৷
মেমরি
"মেমরি" ট্যাবে আপনাকে একটি বোতামে ক্লিক করতে হবে - "স্ন্যাপশট নিন" - তথ্য সংগ্রহ করতে। আমার জন্য, এটি ইভেন্টগুলির একটি মানচিত্র তৈরি করেছে যা প্রায় 600 Kb স্ট্রিং, 1 Mb অবজেক্ট এবং 1 Mb স্ক্রিপ্ট মেমরিতে তাদের উপায় খুঁজে বের করে। আপনি ড্রপডাউন মেনুতে ক্লিক করে একই উপাদানগুলিকে কয়েকটি ভিন্ন উপায়ে দেখতে পারেন যেখানে এটি "ট্রি ম্যাপ" বলে, যেমন আপনি এই স্ক্রিনশটটিতে দেখতে পাচ্ছেন।
স্টোরেজ
অবশেষে, আপনি যদি "স্টোরেজ" ট্যাবে ক্লিক করেন, তাহলে আপনি স্থায়ী ফাইলগুলি দেখতে পাবেন যা একটি ওয়েবসাইট আপনার কম্পিউটারে রেখেছে। বেশিরভাগ ব্যবহারকারীর জন্য প্রাসঙ্গিক, এতে কুকিজ অন্তর্ভুক্ত রয়েছে। আপনি নীচের ছবিতে একটি লোড দেখতে পারেন৷
৷
আপনি ডানদিকের প্যানেলে দেখতে পাচ্ছেন যে এই বিশেষ কুকির মেয়াদ পরবর্তী দশকের মাঝামাঝি সময়ে শেষ হবে এবং আমি এই নিবন্ধটি লেখার সময় এটি অ্যাক্সেস করেছি।
উপসংহার
ফায়ারফক্স ইন্সপেক্টর ব্যবহার করার সময় অনেক কিছু আছে। এর একাধিক অংশের এই ভূমিকা আপনাকে কিছু সময়ের জন্য ব্যস্ত রাখতে হবে।
একটি সাইটের HTML উপাদান পরিবর্তন করতে কিছু সময় নিন। তাদের লোডিং সময় দেখতে কয়েকটি ভিন্ন ওয়েবসাইট দেখুন। একটি নির্দিষ্ট পৃষ্ঠা আপনার মেশিনে কতগুলি কুকি সংরক্ষণ করার চেষ্টা করে তা খুঁজে বের করুন৷ মাঝে মাঝে, সেই তথ্য আপনাকে বিরতি দিতে পারে।
আশা করি, আবিষ্কারের এই যাত্রা আপনাকে ওয়েবসাইটগুলি কী করে সে সম্পর্কে আরও বেশি বোঝা দেবে যাতে তারা আপনার প্রত্যাশা অনুযায়ী কাজ করতে পারে। এটা আপনি আগে উপলব্ধি তুলনায় অনেক বেশি হতে পারে.
