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