কভারেজ: অব্যবহৃত JavaScript এবং CSS খুঁজুন

Chrome DevTools-এর কভারেজ ট্যাব আপনাকে অব্যবহৃত JavaScript এবং CSS কোড খুঁজে পেতে সাহায্য করতে পারে। অব্যবহৃত কোড সরানো আপনার পৃষ্ঠা লোড গতি বাড়াতে এবং আপনার মোবাইল ব্যবহারকারীদের সেলুলার ডেটা সংরক্ষণ করতে পারে.

কোড কভারেজ বিশ্লেষণ।
চিত্র 1 . কোড কভারেজ বিশ্লেষণ।

ওভারভিউ

ওয়েব ডেভেলপমেন্টে অব্যবহৃত জাভাস্ক্রিপ্ট বা সিএসএস শিপিং একটি সাধারণ সমস্যা। উদাহরণস্বরূপ, ধরুন আপনি আপনার পৃষ্ঠায় বুটস্ট্র্যাপের বোতাম উপাদানটি ব্যবহার করতে চান। বোতাম উপাদানটি ব্যবহার করার জন্য আপনাকে আপনার HTML এ বুটস্ট্র্যাপের স্টাইলশীটে একটি লিঙ্ক যুক্ত করতে হবে, যেমন:

...
<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 নিম্নলিখিত কারণে একটি সমস্যা:

  • অতিরিক্ত কোড আপনার পৃষ্ঠার লোড কমিয়ে দেয়। রেন্ডার-ব্লকিং CSS দেখুন।
  • যদি একজন ব্যবহারকারী মোবাইল ডিভাইসে পৃষ্ঠাটি অ্যাক্সেস করে, অতিরিক্ত কোডটি তাদের সেলুলার ডেটা ব্যবহার করে।

কভারেজ ট্যাব খুলুন

  1. কমান্ড মেনু খুলুন
  2. coverage টাইপ করা শুরু করুন, কভারেজ দেখান কমান্ডটি নির্বাচন করুন এবং তারপর কমান্ডটি চালানোর জন্য এন্টার টিপুন। কভারেজ ট্যাবটি ড্রয়ারে খোলে।
কভারেজ ট্যাব।
চিত্র ২ . কভারেজ ট্যাব।

রেকর্ড কোড কভারেজ

  1. কভারেজ ট্যাবে নিম্নলিখিত বোতামগুলির একটিতে ক্লিক করুন:
    • স্টার্ট ইনস্ট্রুমেন্টিং কভারেজ এবং রিলোড পৃষ্ঠাতে ক্লিক করুন পুনরায় লোড করুন আপনি যদি দেখতে চান যে পৃষ্ঠাটি লোড করার জন্য কী কোড প্রয়োজন।
    • ইনস্ট্রুমেন্ট কভারেজ ক্লিক করুন রেকর্ড আপনি যদি দেখতে চান যে পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করার পরে কোন কোডটি ব্যবহার করা হয়।
  2. স্টপ ইনস্ট্রুমেন্টিং কভারেজ ক্লিক করুন এবং ফলাফল দেখান থামো আপনি যখন রেকর্ডিং কোড কভারেজ বন্ধ করতে চান।

কোড কভারেজ বিশ্লেষণ

কভারেজ ট্যাবের টেবিলটি আপনাকে দেখায় যে কোন সংস্থানগুলি বিশ্লেষণ করা হয়েছে এবং প্রতিটি সংস্থানের মধ্যে কতটা কোড ব্যবহার করা হয়েছে৷ উত্স প্যানেলে সেই সংস্থানটি খুলতে একটি সারিতে ক্লিক করুন এবং ব্যবহৃত কোড এবং অব্যবহৃত কোডের লাইন-বাই-লাইন ভাঙ্গন দেখুন। কোডের যেকোনো অব্যবহৃত লাইনের শুরুতে একটি লাল রেখা থাকবে।

একটি কোড কভারেজ রিপোর্ট।
চিত্র 3 । একটি কোড কভারেজ রিপোর্ট।
  • ইউআরএল কলাম হল সেই রিসোর্সের ইউআরএল যা বিশ্লেষণ করা হয়েছে।
  • টাইপ কলাম বলে যে সংস্থানটিতে CSS, JavaScript বা উভয়ই আছে কিনা।
  • মোট বাইট কলাম হল বাইটে সম্পদের মোট আকার।
  • অব্যবহৃত বাইট কলাম হল বাইটের সংখ্যা যা ব্যবহার করা হয়নি।
  • শেষ, নামবিহীন কলাম হল মোট বাইট এবং অব্যবহৃত বাইট কলামের একটি ভিজ্যুয়ালাইজেশন। বারের লাল অংশটি অব্যবহৃত বাইট। সবুজ অংশ বাইট ব্যবহার করা হয়.