कवरेज: इस्तेमाल नहीं की गई JavaScript और सीएसएस का पता लगाना

कायस बास्क
कायस बैस्क

Chrome DevTools के कवरेज टैब की मदद से, इस्तेमाल नहीं किए गए JavaScript और सीएसएस कोड को ढूंढा जा सकता है. इस्तेमाल न होने वाले कोड को हटाने से आपका पेज लोड होने की रफ़्तार बढ़ सकती है और आपके मोबाइल उपयोगकर्ताओं का सेल्युलर डेटा बच सकता है.

कोड कवरेज का विश्लेषण किया जा रहा है.
पहली इमेज. कोड कवरेज का विश्लेषण किया जा रहा है.

खास जानकारी

इस्तेमाल न किए गए JavaScript या सीएसएस को शिपिंग करना, वेब डेवलपमेंट में एक आम समस्या है. उदाहरण के लिए, मान लें कि आपको अपने पेज पर बूटस्ट्रैप के बटन कॉम्पोनेंट का इस्तेमाल करना है. बटन कॉम्पोनेंट का इस्तेमाल करने के लिए, आपको अपने एचटीएमएल में बूटस्ट्रैप की स्टाइलशीट का लिंक जोड़ना होगा, जैसे:

...
<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>
...

इस स्टाइलशीट में सिर्फ़ बटन कॉम्पोनेंट का कोड शामिल नहीं होता. इसमें बूटस्ट्रैप के सभी कॉम्पोनेंट के लिए सीएसएस शामिल है. हालांकि, बूटस्ट्रैप के किसी भी दूसरे कॉम्पोनेंट का इस्तेमाल नहीं किया जा रहा है. इसका मतलब है कि आपका पेज सीएसएस का ऐसा कलेक्शन डाउनलोड कर रहा है जिसकी ज़रूरत नहीं है. इस अतिरिक्त सीएसएस की समस्या इन वजहों से है:

  • अतिरिक्त कोड आपके पेज लोड को धीमा कर देता है. रेंडर ब्लॉक करने वाला सीएसएस देखें.
  • अगर कोई उपयोगकर्ता किसी मोबाइल डिवाइस पर उस पेज को ऐक्सेस करता है, तो यह अतिरिक्त कोड उसके मोबाइल डेटा का इस्तेमाल करता है.

कवरेज टैब खोलें

  1. Command मेन्यू खोलें.
  2. coverage टाइप करना शुरू करें और कवरेज दिखाएं निर्देश को चुनें. इसके बाद, निर्देश चलाने के लिए Enter दबाएं. कवरेज टैब, ड्रॉर में खुलता है.
कवरेज टैब.
दूसरी इमेज. कवरेज टैब.

कोड कवरेज रिकॉर्ड करें

  1. कवरेज टैब में जाकर, इनमें से किसी एक बटन पर क्लिक करें:
    • इंस्ट्रुमेंटिंग कवरेज और रीलोड पेज शुरू करें पर क्लिक करें फिर से लोड करें अगर आपको यह देखना है कि पेज लोड करने के लिए कौनसा कोड ज़रूरी है.
    • इंस्ट्रुमेंट कवरेज पर क्लिक करें रिकॉर्ड करें अगर आपको यह देखना है कि पेज से इंटरैक्ट करने के बाद कौनसा कोड इस्तेमाल किया जाता है.
  2. जब आपको कोड कवरेज को रिकॉर्ड करना बंद करना हो, तब इंस्ट्रुमेंटिंग कवरेज बंद करें और नतीजे दिखाएं पर क्लिक करें. रोकें

कोड कवरेज का विश्लेषण करें

कवरेज टैब में मौजूद टेबल से पता चलता है कि किन संसाधनों का विश्लेषण किया गया है और हर संसाधन में कितने कोड का इस्तेमाल किया गया है. उस संसाधन को सोर्स पैनल में खोलने के लिए, उसकी लाइन पर क्लिक करें. इसके बाद, इस्तेमाल किए गए कोड और इस्तेमाल न किए गए कोड का लाइन-दर-लाइन ब्रेकडाउन देखें. कोड की ऐसी किसी भी लाइन की शुरुआत में लाल रंग की लाइन होगी जिसका इस्तेमाल नहीं किया गया है.

कोड कवरेज की रिपोर्ट.
तीसरी इमेज. कोड कवरेज की रिपोर्ट.
  • यूआरएल कॉलम में, उस संसाधन का यूआरएल होता है जिसका विश्लेषण किया गया था.
  • टाइप कॉलम बताता है कि संसाधन में सीएसएस, JavaScript या दोनों शामिल हैं या नहीं.
  • कुल बाइट कॉलम, संसाधन का कुल साइज़ बाइट में होता है.
  • अप्रयुक्त बाइट कॉलम, उन बाइट की संख्या है जिनका इस्तेमाल नहीं किया गया.
  • बिना नाम वाला आखिरी कॉलम, कुल बाइट और इस्तेमाल नहीं की गई बाइट कॉलम का विज़ुअलाइज़ेशन है. बार के लाल रंग के सेक्शन में बाइट डेटा इस्तेमाल नहीं हुआ है. हरे रंग वाले सेक्शन में बाइट का इस्तेमाल किया जाता है.