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>
...
इस स्टाइल शीट में, सिर्फ़ बटन कॉम्पोनेंट का कोड शामिल नहीं होता. इसमें बूटस्ट्रैप के सभी कॉम्पोनेंट के लिए सीएसएस शामिल है. लेकिन किसी भी अन्य बूटस्ट्रैप कॉम्पोनेंट का इस्तेमाल नहीं किया जा रहा है. अब आपका पेज ऐसा सीएसएस डाउनलोड कर रहा है जिस की ज़रूरत नहीं है. यह अतिरिक्त सीएसएस इन वजहों से समस्या हो रही है:
- अतिरिक्त कोड की वजह से आपके पेज की लोडिंग धीमी हो जाती है. रेंडर-ब्लॉक करने वाला सीएसएस देखें.
- अगर कोई उपयोगकर्ता किसी मोबाइल डिवाइस पर उस पेज को ऐक्सेस करता है, तो अतिरिक्त कोड उसके मोबाइल डेटा का इस्तेमाल करता है.
कवरेज पैनल खोलें
- Command मेन्यू खोलें.
coverageटाइप करना शुरू करें और कवरेज दिखाएं निर्देश चुनें. इसके बाद, निर्देश चलाने के लिए Enter दबाएं. कवरेज पैनल, ड्रॉर में खुलता है.
रिकॉर्ड कोड कवरेज
कोड कवरेज कैप्चर करने के लिए:
कवरेज का दायरा सेट करने के लिए, कवरेज पैनल के सबसे ऊपर मौजूद कार्रवाई बार में, ड्रॉप-डाउन सूची से हर फ़ंक्शन या हर ब्लॉक के हिसाब से चुनें.
रिकॉर्डिंग शुरू करने के लिए, इंस्ट्रक्शन कवरेज शुरू करें और पेज को फिर से लोड करें रीफ़्रेश करें पर क्लिक करें. कवरेज पैनल, पेज को फिर से लोड करता है और पेज को लोड करने के लिए ज़रूरी कोड कैप्चर करता है. साथ ही, पेज के साथ इंटरैक्ट करने के दौरान रिकॉर्डिंग जारी रखता है.
कोड कवरेज को रिकॉर्ड करना बंद करने के लिए, stop_circle डिवाइसिंग कवरेज बंद करें और नतीजे दिखाएं पर क्लिक करें.
कोड कवरेज का विश्लेषण करें
कवरेज पैनल में मौजूद टेबल से पता चलता है कि किन संसाधनों का विश्लेषण किया गया था और हर संसाधन में कितना कोड इस्तेमाल किया गया है.
किसी संसाधन को खोलने के लिए, उसे सोर्स पैनल में खोलने के लिए, उसकी लाइन पर क्लिक करें. इसके बाद, इस्तेमाल किए गए कोड और इस्तेमाल नहीं किए गए कोड का लाइन-दर-लाइन ब्रेकडाउन देखें. अगर कोड की कोई इस्तेमाल नहीं की गई है, तो उसे कॉलम के बगल में लाल रंग से मार्क किया जाता है. इसके आगे लाइन नंबर, बाईं ओर होते हैं.
- यूआरएल कॉलम, उस संसाधन का यूआरएल होता है जिसका विश्लेषण किया गया था.
- टाइप कॉलम बताता है कि संसाधन में सीएसएस, JavaScript या दोनों शामिल हैं या नहीं.
- कुल बाइट कॉलम, संसाधन का कुल साइज़ बाइट में होता है.
- इस्तेमाल नहीं किए गए बाइट कॉलम, उन बाइट की संख्या है जिन्हें इस्तेमाल नहीं किया गया है.
- आखिरी और बिना नाम वाला कॉलम, कुल बाइट और इस्तेमाल नहीं की गई बाइट कॉलम का विज़ुअलाइज़ेशन है. बार का लाल सेक्शन, इस्तेमाल न किए हुए बाइट है. स्लेटी रंग वाले सेक्शन में बाइट का इस्तेमाल किया जाता है.
रिपोर्ट को यूआरएल के हिसाब से फ़िल्टर करने के लिए, उसे कार्रवाई बार में मौजूद फ़िल्टर में डालें.
कवरेज पैनल के सबसे नीचे मौजूद स्टेटस बार से, यह पता चलता है कि कितने प्रतिशत कोड का इस्तेमाल किया गया है. स्टेटस बार में, फ़िल्टर का इस्तेमाल किया जाता है.
अपनी रिपोर्ट में दिखाने के लिए, फ़िल्टर बार के बगल में मौजूद ड्रॉप-डाउन सूची से सभी या सिर्फ़ सीएसएस या JavaScript चुनें.
अपनी रिपोर्ट में एक्सटेंशन कोड शामिल करने के लिए, check_box कॉन्टेंट स्क्रिप्ट चालू करें.
अपनी रिपोर्ट एक्सपोर्ट करने के लिए, कवरेज एक्सपोर्ट करें डाउनलोड करें पर क्लिक करें.