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