इस ट्यूटोरियल में, किसी पेज की नेटवर्क गतिविधि का पता लगाने के लिए, आम तौर पर इस्तेमाल की जाने वाली कुछ DevTools सुविधाएं दी गई हैं.
अगर आपको इसके बजाय सुविधाओं को ब्राउज़ करना है, तो नेटवर्क रेफ़रंस देखें.
इस ट्यूटोरियल का वीडियो वर्शन पढ़ें या देखें:
नेटवर्क पैनल का इस्तेमाल कब करना चाहिए
आम तौर पर, नेटवर्क पैनल का इस्तेमाल तब करें, जब आपको यह पक्का करना हो कि संसाधन उम्मीद के मुताबिक डाउनलोड या अपलोड किए जा रहे हैं. नेटवर्क पैनल को आम तौर पर इस्तेमाल करने के उदाहरण यहां दिए गए हैं:
- यह पक्का करना कि रिसॉर्स असल में अपलोड या डाउनलोड किए जा रहे हैं.
- किसी संसाधन की प्रॉपर्टी की जांच करना, जैसे कि उसके एचटीटीपी हेडर, कॉन्टेंट, साइज़ वगैरह.
अगर आपको पेज लोड होने की परफ़ॉर्मेंस को बेहतर बनाने के तरीके जानना है, तो नेटवर्क पैनल से शुरुआत न करें. लोड की परफ़ॉर्मेंस से जुड़ी कई ऐसी समस्याएं हैं जो नेटवर्क गतिविधि से नहीं जुड़ी होती हैं. लाइटहाउस पैनल से शुरुआत करें, क्योंकि इससे आपको टारगेट किए गए कुछ सुझाव मिलते हैं, जिनकी मदद से पेज को बेहतर बनाया जा सकता है. वेबसाइट की स्पीड ऑप्टिमाइज़ करें देखें.
नेटवर्क पैनल खोलें
इस ट्यूटोरियल का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, डेमो खोलें और डेमो पेज पर दी गई सुविधाओं को आज़माएं.
शुरू करने का डेमो खोलें.
पहला डायग्राम. डेमो
डेमो को किसी अलग विंडो में ले जाया जा सकता है.
दूसरा डायग्राम. एक विंडो में डेमो और एक दूसरी विंडो में यह ट्यूटोरियल
Control+Shift+J या Command+Option+J (Mac) दबाकर DevTools खोलें. कंसोल पैनल खुलेगा.
तीसरी इमेज. कंसोल
ऐसा हो सकता है कि आप अपनी विंडो के नीचे DevTools को डॉक करना चाहें.
चौथा डायग्राम. DevTools को विंडो के सबसे नीचे डॉक किया गया है
नेटवर्क टैब पर क्लिक करें. नेटवर्क पैनल खुलता है.
पांचवीं इमेज. DevTools को विंडो के सबसे नीचे डॉक किया गया है
फ़िलहाल, नेटवर्क पैनल खाली है. इसकी वजह यह है कि DevTools सिर्फ़ नेटवर्क पर की गई गतिविधि को लॉग करता है, जब यह खुला हो. साथ ही, DevTools खोलने के बाद से कोई नेटवर्क गतिविधि नहीं हुई है.
नेटवर्क पर की गई गतिविधियों का लॉग पाएं
किसी पेज की वजह से होने वाली नेटवर्क गतिविधि को देखने के लिए:
पेज को फिर से लोड करें. नेटवर्क पैनल, नेटवर्क पर की गई सभी गतिविधियों को नेटवर्क लॉग में लॉग करता है.
छठा डायग्राम. नेटवर्क लॉग
नेटवर्क लॉग की हर पंक्ति एक संसाधन के बारे में बताती है. डिफ़ॉल्ट रूप से, संसाधनों को समय के हिसाब से सूची में रखा जाता है. मुख्य संसाधन आम तौर पर मुख्य एचटीएमएल दस्तावेज़ होता है. नीचे वाले संसाधन का अनुरोध पिछली बार किया गया था.
हर कॉलम में किसी संसाधन के बारे में जानकारी दिखती है. इमेज 6 में डिफ़ॉल्ट कॉलम दिखते हैं:
- स्टेटस. एचटीटीपी रिस्पॉन्स कोड.
- टाइप. संसाधन किस तरह का है.
- शुरू करने वाला. किसी संसाधन का अनुरोध करने की वजह. शुरू करने वाले कॉलम में दिए गए लिंक पर क्लिक करने से, आपको उस सोर्स कोड पर ले जाया जाता है जिसकी वजह से अनुरोध किया गया था.
- समय. अनुरोध में कितना समय लगा.
वॉटरफ़ॉल. अनुरोध के अलग-अलग चरणों को ग्राफ़िक की मदद से दिखाया गया है. ब्रेकडाउन देखने के लिए वॉटरफ़ॉल पर कर्सर घुमाएं.
जब तक DevTools खुला रहेगा, तब तक वह नेटवर्क लॉग में नेटवर्क गतिविधि को रिकॉर्ड करेगा. इसे दिखाने के लिए, सबसे पहले नेटवर्क लॉग पर सबसे नीचे जाएं और पिछली गतिविधि को नोट करें.
अब, डेमो में डेटा पाएं बटन पर क्लिक करें.
नेटवर्क लॉग के नीचे फिर से देखें.
getstarted.json
नाम का एक नया संसाधन मौजूद है. डेटा पाएं बटन पर क्लिक करने से, पेज ने इस फ़ाइल का अनुरोध किया.सातवां डायग्राम. नेटवर्क लॉग में एक नया संसाधन
ज़्यादा जानकारी दिखाएं
नेटवर्क लॉग के कॉलम कॉन्फ़िगर किए जा सकते हैं. जिन कॉलम का इस्तेमाल नहीं किया जा रहा है उन्हें छिपाया जा सकता है. ऐसे कई कॉलम हैं जो डिफ़ॉल्ट रूप से छिपे होते हैं, जो आपके लिए उपयोगी हो सकते हैं.
नेटवर्क लॉग टेबल के हेडर पर राइट क्लिक करें और डोमेन चुनें. हर संसाधन का डोमेन अब दिखता है.
आठवां इमेज. डोमेन कॉलम सक्षम करना
धीमे इंटरनेट कनेक्शन को सिम्युलेट करें
आपके उपयोगकर्ताओं के मोबाइल डिवाइस के नेटवर्क कनेक्शन की तुलना में, साइटें बनाने के लिए जिस कंप्यूटर का इस्तेमाल किया जाता है उसका इंटरनेट कनेक्शन शायद ज़्यादा तेज़ हो. पेज को थ्रॉटल करके, आपको इस बात का बेहतर आइडिया मिल सकता है कि किसी पेज को मोबाइल डिवाइस पर लोड होने में कितना समय लगता है.
थ्रटलिंग ड्रॉपडाउन पर क्लिक करें, जो डिफ़ॉल्ट रूप से ऑनलाइन पर सेट होता है.
आकृति 9. थ्रॉटलिंग चालू करना
धीमा 3G चुनें.
आकृति 10. धीमा 3G चुनना
Reload को दबाकर रखें और फिर खाली cache And Hard Reload को चुनें.
इमेज 11. कैश मेमोरी और हार्ड रीलोड खाली करें
बार-बार विज़िट करने पर, ब्राउज़र आम तौर पर अपने कैश से कुछ फ़ाइलें दिखाता है, जिससे पेज लोड होने की रफ़्तार बढ़ जाती है. कैश मेमोरी और हार्ड रीलोड खाली करने से ब्राउज़र को सभी संसाधनों के नेटवर्क पर जाने के लिए मजबूर हो जाता है. यह तब मददगार होता है, जब आपको यह देखना हो कि आपकी वेबसाइट पर पहली बार आने वाले विज़िटर को पेज पर कैसा अनुभव मिला.
स्क्रीनशॉट लें
स्क्रीनशॉट की मदद से, यह देखा जा सकता है कि लोड होने के दौरान, समय के साथ कोई पेज कैसा दिखता था.
- स्क्रीनशॉट कैप्चर करें पर क्लिक करें.
खाली कैश और हार्ड रीलोड वर्कफ़्लो के ज़रिए पेज को फिर से लोड करें. अगर आपको इसे करने के तरीके के बारे में रिमाइंडर की ज़रूरत है, तो धीमे कनेक्शन को सिम्युलेट करें देखें. स्क्रीनशॉट पैनल में, पेज लोड होने की प्रोसेस के दौरान, पेज के अलग-अलग हिस्सों को देखने के थंबनेल दिखते हैं.
आकर्षक 12. पेज लोड के स्क्रीनशॉट
पहले थंबनेल पर क्लिक करें. DevTools आपको दिखाता है कि उस समय कौनसी नेटवर्क गतिविधि हो रही थी.
इमेज 13. पहले स्क्रीनशॉट के दौरान हो रही नेटवर्क गतिविधि
स्क्रीनशॉट पैनल बंद करने के लिए, स्क्रीनशॉट कैप्चर करें पर फिर से क्लिक करें.
पेज फिर से लोड करें.
संसाधन की जानकारी की जांच करना
किसी संसाधन के बारे में ज़्यादा जानकारी पाने के लिए उस पर क्लिक करें. इसे अभी आज़माएं:
getstarted.html
पर क्लिक करें. हेडर टैब दिखता है. एचटीटीपी हेडर की जांच करने के लिए इस टैब का इस्तेमाल करें.इमेज 14. हेडर टैब
झलक देखें टैब पर क्लिक करें. एचटीएमएल की बेसिक रेंडरिंग को दिखाया गया है.
इमेज 15. 'झलक देखें' टैब
यह टैब तब मददगार होता है, जब कोई एपीआई एचटीएमएल में गड़बड़ी वाला कोड दिखाता है. साथ ही, एचटीएमएल सोर्स कोड के मुकाबले, रेंडर किए गए एचटीएमएल को पढ़ना आसान होता है. इसके अलावा, इमेज की जांच करते समय भी यह टैब मददगार साबित होता है.
जवाब टैब पर क्लिक करें. एचटीएमएल सोर्स कोड दिखाया जाता है.
इमेज 16. 'जवाब' टैब
समय टैब पर क्लिक करें. इस संसाधन के लिए नेटवर्क गतिविधि का ब्रेकडाउन दिखाया गया है.
इमेज 17. 'समय' टैब
नेटवर्क लॉग को फिर से देखने के लिए, बंद करें पर क्लिक करें.
इमेज 18. 'बंद करें' बटन
Search Network के हेडर और जवाब
किसी खास स्ट्रिंग या रेगुलर एक्सप्रेशन के लिए, एचटीटीपी हेडर और सभी रिसॉर्स के रिस्पॉन्स खोजने के लिए, खोजें पैनल का इस्तेमाल करें.
उदाहरण के लिए, मान लें कि आपको यह देखना है कि आपके रिसॉर्स, कैश मेमोरी में सेव होने वाली सही नीतियों का इस्तेमाल कर रहे हैं या नहीं.
खोजें पर क्लिक करें. खोज पैनल, नेटवर्क लॉग की बाईं ओर खुलता है.
इमेज 19. खोज पैनल
Cache-Control
टाइप करें और Enter दबाएं. खोज पैनल मेंCache-Control
के वे सभी इंस्टेंस मौजूद होते हैं जो इसे रिसॉर्स हेडर या कॉन्टेंट में मिलते हैं.इमेज 20.
Cache-Control
के लिए खोज नतीजेआपको जो नतीजा मिला है उसे देखने के लिए उस पर क्लिक करें. अगर हेडर में क्वेरी मिलती है, तो हेडर टैब खुलता है. कॉन्टेंट में क्वेरी मिलने पर, जवाब टैब खुलेगा.
आकर्षक 21. हेडर टैब में हाइलाइट किया गया खोज का नतीजा
खोज पैनल और समय टैब बंद करें.
आकर्षक 22. 'बंद करें' बटन
रिसॉर्स फ़िल्टर करना
DevTools ऐसे संसाधनों को फ़िल्टर करने के लिए कई वर्कफ़्लो देता है, जो मौजूदा टास्क के लिए काम के नहीं हैं.
इमेज 23. फ़िल्टर टूलबार
फ़िल्टर टूलबार डिफ़ॉल्ट रूप से चालू होना चाहिए. अगर ऐसा नहीं है, तो:
- इसे देखने के लिए, फ़िल्टर करें पर क्लिक करें.
स्ट्रिंग, रेगुलर एक्सप्रेशन या प्रॉपर्टी के हिसाब से फ़िल्टर करें
फ़िल्टर टेक्स्ट बॉक्स में, कई तरह के फ़िल्टर इस्तेमाल किए जा सकते हैं.
फ़िल्टर टेक्स्ट बॉक्स में
png
टाइप करें. सिर्फ़ वे फ़ाइलें दिखाई जाती हैं जिनमेंpng
टेक्स्ट होता है. इस मामले में, फ़िल्टर से मैच करने वाली सिर्फ़ PNG इमेज होती हैं.आकर्षक 24. स्ट्रिंग फ़िल्टर
/.*\.[cj]s+$/
टाइप. DevTools ऐसे किसी भी संसाधन को फ़िल्टर कर देता है जिसके फ़ाइल नाम के आखिर मेंj
याc
के बाद एक या उससे ज़्यादाs
वर्ण नहीं होते.आकर्षक 25. रेगुलर एक्सप्रेशन फ़िल्टर
-main.css
टाइप. DevToolsmain.css
को फ़िल्टर कर देता है. अगर कोई दूसरी फ़ाइल पैटर्न से मेल खाती है, तो उसे भी फ़िल्टर कर दिया जाएगा.आकर्षक 26. नेगेटिव फ़िल्टर
फ़िल्टर टेक्स्ट बॉक्स में
domain:raw.githubusercontent.com
टाइप करें. DevTools ऐसे किसी भी संसाधन को फ़िल्टर कर देता है जो इस डोमेन से मेल नहीं खाता.आकर्षक 27. प्रॉपर्टी फ़िल्टर
फ़िल्टर की जा सकने वाली प्रॉपर्टी की पूरी सूची देखने के लिए, प्रॉपर्टी के हिसाब से फ़िल्टर करने के अनुरोध देखें.
किसी भी टेक्स्ट के फ़िल्टर टेक्स्ट बॉक्स से सही का निशान हटाएं.
रिसॉर्स टाइप के हिसाब से फ़िल्टर करें
स्टाइलशीट जैसी किसी खास तरह की फ़ाइल पर फ़ोकस करने के लिए:
सीएसएस पर क्लिक करें. बाकी सभी फ़ाइल टाइप को फ़िल्टर कर दिया जाता है.
आकर्षक 28. सिर्फ़ सीएसएस फ़ाइलें दिखाई जा रही हैं
स्क्रिप्ट भी देखने के लिए, Control या Command (Mac) दबाकर रखें और फिर JS पर क्लिक करें.
आकर्षक 29. सिर्फ़ सीएसएस और JS फ़ाइलें दिखाई जा रही हैं
फ़िल्टर हटाने और सभी संसाधनों को फिर से देखने के लिए, सभी पर क्लिक करें.
फ़िल्टर करने के दूसरे वर्कफ़्लो के लिए, फ़िल्टर के अनुरोध देखें.
अनुरोध ब्लॉक करें
किसी पेज के कुछ संसाधन उपलब्ध न होने पर, यह कैसा दिखता है और क्या करता है? क्या यह पूरी तरह से काम नहीं कर रहा है या अब भी ठीक से काम कर रहा है? यह पता लगाने के लिए मिले अनुरोधों को ब्लॉक करें:
Command मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं.
इमेज 30. निर्देश मेन्यू
block
टाइप करें, ब्लॉक करने के अनुरोध दिखाएं को चुनें और Enter दबाएं.इमेज 31. ब्लॉक करने के अनुरोध को दिखाएं
पैटर्न जोड़ें पर क्लिक करें.
main.css
टाइप.इमेज 32.
main.css
को ब्लॉक किया जा रहा हैजोड़ें पर क्लिक करें.
पेज को फिर से लोड करें. उम्मीद के मुताबिक, पेज की स्टाइल थोड़ी खराब है, क्योंकि इसकी मुख्य स्टाइलशीट को ब्लॉक कर दिया गया है. नेटवर्क लॉग में
main.css
लाइन को नोट करें. लाल रंग के टेक्स्ट का मतलब है कि संसाधन ब्लॉक था.इमेज 33.
main.css
को ब्लॉक कर दिया गया हैअनुरोध पर रोक लगाने की सुविधा चालू करें चेकबॉक्स से सही का निशान हटाएं.
अगले चरण
बधाई हो, आपने ट्यूटोरियल पूरा कर लिया है. अपना अवॉर्ड पाने के लिए, Dispense अवॉर्ड पर क्लिक करें.
नेटवर्क गतिविधि की जांच करने से जुड़ी DevTools की अन्य सुविधाओं के बारे में जानने के लिए, नेटवर्क रेफ़रंस देखें.