কভারেজ প্যানেল আপনাকে অব্যবহৃত জাভাস্ক্রিপ্ট এবং সিএসএস কোড খুঁজে পেতে সাহায্য করে। অব্যবহৃত কোড মুছে ফেললে আপনার পেজ লোড হওয়ার গতি বাড়ে এবং ব্যবহারকারীদের মোবাইল ডেটা সাশ্রয় হয়।
সংক্ষিপ্ত বিবরণ
ওয়েব ডেভেলপমেন্টে অব্যবহৃত জাভাস্ক্রিপ্ট বা সিএসএস ব্যবহার করা একটি সাধারণ সমস্যা। উদাহরণস্বরূপ, ধরুন আপনি আপনার পেজে বুটস্ট্র্যাপের বাটন কম্পোনেন্ট ব্যবহার করতে চান। বাটন কম্পোনেন্টটি ব্যবহার করার জন্য আপনাকে আপনার এইচটিএমএল-এ বুটস্ট্র্যাপের স্টাইল শীটের একটি লিঙ্ক যোগ করতে হবে, যেমনটা এখানে দেখানো হয়েছে:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
এই স্টাইল শীটটিতে শুধু বাটন কম্পোনেন্টের কোডই অন্তর্ভুক্ত নয়। এতে বুটস্ট্র্যাপের সমস্ত কম্পোনেন্টের CSS রয়েছে। কিন্তু আপনি বুটস্ট্র্যাপের অন্য কোনো কম্পোনেন্ট ব্যবহার করছেন না। ফলে আপনার পেজটি এমন অনেক CSS ডাউনলোড করছে যার কোনো প্রয়োজন নেই। এই অতিরিক্ত CSS নিম্নলিখিত কারণগুলোর জন্য একটি সমস্যা:
- অতিরিক্ত কোডটি আপনার পেজ লোড হওয়ার গতি কমিয়ে দেয়। রেন্ডার-ব্লকিং সিএসএস (Render-Blocking CSS) দেখুন।
- যদি কোনো ব্যবহারকারী মোবাইল ডিভাইসে পৃষ্ঠাটি খোলেন, তাহলে অতিরিক্ত কোডটি তাদের মোবাইল ডেটা খরচ করে।
কভারেজ প্যানেল আপনাকে আপনার পেজ রেকর্ড করতে, CSS এবং জাভাস্ক্রিপ্ট রিসোর্সের মোট ব্যবহৃত ও অব্যবহৃত বাইটের একটি রিপোর্ট দেখতে এবং সোর্সেস প্যানেলে কোড ট্র্যাক করতে দেয়।
কভারেজ প্যানেলটি খুলুন
- ডেভটুলস খুলুন ।
- কমান্ড মেনু খুলুন ।
coverageটাইপ করা শুরু করুন, ‘Show Coverage’ কমান্ডটি নির্বাচন করুন এবং তারপর কমান্ডটি চালানোর জন্য Enter চাপুন। ড্রয়ারে Coverage প্যানেলটি খুলে যাবে।
বিকল্পভাবে, উপরের ডান কোণায়, আরও বিকল্প > আরও সরঞ্জাম > কভারেজ নির্বাচন করুন।
রেকর্ড কোড কভারেজ
কোড কভারেজ ক্যাপচার করতে:
কভারেজের পরিধি নির্ধারণ করতে, কভারেজ প্যানেলের উপরের অ্যাকশন বারে থাকা ড্রপ-ডাউন তালিকা থেকে ‘প্রতি ফাংশন’ অথবা ‘প্রতি ব্লক’ নির্বাচন করুন।
রেকর্ডিং শুরু করতে, প্যানেলের মাঝখানে থাকা রিলোড বোতামে ক্লিক করুন। কভারেজ প্যানেলটি পৃষ্ঠাটি পুনরায় লোড করে, পৃষ্ঠাটি লোড করার জন্য প্রয়োজনীয় কোড ক্যাপচার করে এবং আপনি পৃষ্ঠাটিতে ইন্টারঅ্যাক্ট করার সময় রেকর্ডিং চালিয়ে যায়।
কোড কভারেজ রেকর্ডিং বন্ধ করতে, প্যানেলের অ্যাকশন বারে ক্লিক করুন , যা কভারেজ ইনস্ট্রুমেন্টেশন বন্ধ করে এবং ফলাফল দেখায় ।
কোড কভারেজ বিশ্লেষণ করুন
কভারেজ প্যানেলের টেবিলটি আপনাকে দেখায় কোন কোন রিসোর্স বিশ্লেষণ করা হয়েছে এবং প্রতিটি রিসোর্সের মধ্যে কী পরিমাণ কোড ব্যবহৃত হয়েছে।
সোর্সেস প্যানেলে কোনো রিসোর্স খুলতে এবং ব্যবহৃত ও অব্যবহৃত কোডের লাইন-বাই-লাইন বিশ্লেষণ দেখতে একটি সারিতে ক্লিক করুন। যেকোনো অব্যবহৃত কোডের লাইন বাম দিকের লাইন নম্বরযুক্ত কলামের পাশে উল্লম্ব ধূসর রেখা দ্বারা চিহ্নিত করা থাকে।
- URL কলামটি হলো বিশ্লেষণ করা রিসোর্সটির URL।
- Type কলামটি থেকে জানা যায় যে রিসোর্সটিতে CSS, JavaScript, নাকি উভয়ই রয়েছে।
- 'Total Bytes' কলামটি হলো রিসোর্সটির মোট আকার, যা বাইটে পরিমাপ করা হয়।
- 'Unused Bytes' কলামটি হলো সেই বাইটের সংখ্যা যা ব্যবহার করা হয়নি।
- ' ব্যবহার ভিজ্যুয়ালাইজেশন ' কলামটি হলো ' মোট বাইট' এবং 'অব্যবহৃত বাইট' কলামগুলোর একটি ভিজ্যুয়ালাইজেশন। বারটির ধূসর অংশটি হলো অব্যবহৃত বাইট। সবুজ অংশটি হলো ব্যবহৃত বাইট।
URL অনুযায়ী রিপোর্ট ফিল্টার করতে, অ্যাকশন বারের ফিল্টারে সেটি উল্লেখ করুন।
কভারেজ প্যানেলের নিচের স্ট্যাটাস বারটি আপনাকে ব্যবহৃত কোডের শতাংশ দেখায়। এই স্ট্যাটাস বারটি ফিল্টারিং বিষয়টি বিবেচনায় রাখে।
ফিল্টার বারের পাশে থাকা ড্রপ-ডাউন তালিকা থেকে, আপনি আপনার রিপোর্টে দেখানোর জন্য 'সব' (All ), অথবা শুধুমাত্র CSS বা JavaScript নির্বাচন করতে পারেন।
আপনার রিপোর্টে এক্সটেনশন কোড অন্তর্ভুক্ত করতে, ‘Content scripts’ চালু করুন।
আপনার রিপোর্ট এক্সপোর্ট করতে, এক্সপোর্ট কভারেজ'-এ ক্লিক করুন।