नेटवर्क पर की गई गतिविधि की जांच करें

Kayce Basques

यह एक ट्यूटोरियल है, जिसमें किसी पेज की नेटवर्क गतिविधि की जांच करने से जुड़ी, आम तौर पर इस्तेमाल की जाने वाली DevTools की कुछ सुविधाओं के बारे में बताया गया है.

अगर आपको इसके बजाय सुविधाएं ब्राउज़ करनी हैं, तो नेटवर्क संदर्भ देखें.

इस ट्यूटोरियल को पढ़ें या इसका वीडियो वर्शन देखें:

नेटवर्क पैनल का इस्तेमाल कब करें

आम तौर पर, नेटवर्क पैनल का इस्तेमाल तब करें, जब आपको यह पक्का करना हो कि संसाधन उम्मीद के मुताबिक डाउनलोड या अपलोड किए जा रहे हैं. नेटवर्क पैनल के इस्तेमाल के सबसे सामान्य उदाहरण ये हैं:

• यह पक्का करना कि संसाधन वाकई अपलोड या डाउनलोड किए जा रहे हैं.
• किसी एक रिसॉर्स की प्रॉपर्टी की जांच करना, जैसे कि एचटीटीपी हेडर, कॉन्टेंट, साइज़ वगैरह.

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

नेटवर्क पैनल खोलें

इस ट्यूटोरियल का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, डेमो खोलें और डेमो पेज पर दी गई सुविधाओं को आज़माएं.

1. शुरू करें डेमो खोलें.

   

   पहली इमेज. डेमो

   डेमो को किसी अलग विंडो में ले जाया जा सकता है.

   

   दूसरी इमेज. एक विंडो में डेमो और दूसरी विंडो में यह ट्यूटोरियल

2. Control+Shift+J या Command+Option+J (Mac) दबाकर DevTools खोलें. ऐसा करने पर, कंसोल पैनल खुलेगा.

   

   तीसरी इमेज. कंसोल

   DevTools को अपनी विंडो के नीचे डॉक करना पसंद कर सकते हैं.

   

   चौथी इमेज. DevTools विंडो के सबसे नीचे डॉक किया गया है

3. नेटवर्क टैब पर क्लिक करें. नेटवर्क पैनल खुलता है.

   

   पांचवी इमेज. DevTools विंडो के सबसे नीचे डॉक किया गया है

इस समय नेटवर्क पैनल खाली है. इसकी वजह यह है कि DevTools सिर्फ़ नेटवर्क गतिविधि को लॉग करता है. हालांकि, यह चालू रहने के दौरान ही ऐसा होता है. साथ ही, DevTools खोलने के बाद से कोई नेटवर्क गतिविधि नहीं हुई है.

नेटवर्क पर की गई गतिविधियों को लॉग करें

किसी पेज की वजह से होने वाली नेटवर्क गतिविधि देखने के लिए:

1. पेज को फिर से लोड करें. नेटवर्क पैनल, नेटवर्क लॉग में नेटवर्क की सभी गतिविधियों को लॉग करता है.

   

   छठी इमेज. नेटवर्क लॉग

   नेटवर्क लॉग की हर पंक्ति एक संसाधन दिखाती है. डिफ़ॉल्ट रूप से, संसाधनों की सूची समय के हिसाब से दी जाती है. मुख्य संसाधन आम तौर पर मुख्य एचटीएमएल दस्तावेज़ होता है. सबसे नीचे मौजूद संसाधन वह है जिसका अनुरोध पिछली बार किया गया था.

   हर कॉलम, संसाधन के बारे में जानकारी दिखाता है. छठी इमेज में डिफ़ॉल्ट कॉलम दिखाए गए हैं:

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

2. DevTools खुले होने तक, यह नेटवर्क लॉग में नेटवर्क गतिविधि रिकॉर्ड करता रहेगा. इसे दिखाने के लिए, सबसे पहले नेटवर्क लॉग के निचले हिस्से में देखें और पिछली गतिविधि को दिमाग में नोट करें.

3. अब डेमो में, डेटा पाएं बटन पर क्लिक करें.

4. नेटवर्क लॉग के निचले हिस्से पर एक बार फिर से देखें. यहां एक नया संसाधन भी मौजूद है, जिसका नाम getstarted.json है. डेटा पाएं बटन पर क्लिक करने की वजह से पेज ने इस फ़ाइल का अनुरोध किया.

   

   सातवीं इमेज. नेटवर्क लॉग में एक नया संसाधन

ज़्यादा जानकारी दिखाएं

नेटवर्क लॉग के कॉलम कॉन्फ़िगर किए जा सकते हैं. आपके पास उन कॉलम को छिपाने का विकल्प होता है जिनका इस्तेमाल नहीं किया जा रहा है. इसमें कई ऐसे कॉलम भी हैं जो डिफ़ॉल्ट रूप से छिपे हुए हैं. ये आपके लिए काम के हो सकते हैं.

1. नेटवर्क लॉग टेबल के हेडर पर राइट क्लिक करें और डोमेन चुनें. अब हर रिसॉर्स का डोमेन दिखेगा.

   

   आठवीं इमेज. डोमेन कॉलम सक्षम करना

धीमे इंटरनेट कनेक्शन को सिम्युलेट करें

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

1. थ्रॉटलिंग ड्रॉपडाउन पर क्लिक करें. यह डिफ़ॉल्ट रूप से ऑनलाइन पर सेट होता है.

   

   नौवीं इमेज. थ्रॉटलिंग चालू की जा रही है

2. धीमा 3G चुनें.

   

   आकृति 10. स्लो 3G को चुनना

3. फिर से लोड करें को दबाकर रखें. इसके बाद, कैश मेमोरी और हार्ड रीलोड खाली करें को चुनें.

   

   आकृति 11. कैश मेमोरी और हार्ड रीलोड खाली करें

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

स्क्रीनशॉट कैप्चर करें

स्क्रीनशॉट से आप यह देख सकते हैं कि लोड होने के दौरान पेज कैसा दिखता था.

1. स्क्रीनशॉट कैप्चर करें पर क्लिक करें .

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

   

   12वीं इमेज. पेज लोड के स्क्रीनशॉट

3. पहले थंबनेल पर क्लिक करें. DevTools आपको दिखाता है कि उस समय कौनसी नेटवर्क गतिविधि हो रही थी.

   

   13वीं इमेज. पहले स्क्रीनशॉट के दौरान हो रही नेटवर्क गतिविधि

4. स्क्रीनशॉट पैनल बंद करने के लिए, स्क्रीनशॉट कैप्चर करें पर फिर से क्लिक करें.

5. पेज को फिर से लोड करें.

किसी संसाधन की जानकारी की जांच करना

किसी संसाधन के बारे में ज़्यादा जानने के लिए, उस पर क्लिक करें. इसे अभी आज़माएं:

1. getstarted.html पर क्लिक करें. आपको हेडर टैब दिखाया गया है. एचटीटीपी हेडर की जांच करने के लिए, इस टैब का इस्तेमाल करें.

   

   14वीं इमेज. हेडर टैब

2. झलक देखें टैब पर क्लिक करें. एचटीएमएल की बुनियादी रेंडरिंग दिखाई गई है.

   

   इमेज 15. 'झलक देखें' टैब

   यह टैब तब मददगार होता है, जब एपीआई एचटीएमएल में गड़बड़ी का कोड दिखाता है. साथ ही, एचटीएमएल सोर्स कोड के मुकाबले, रेंडर किए गए एचटीएमएल को पढ़ना या इमेज की जांच करते समय इसे पढ़ना ज़्यादा आसान होता है.

3. जवाब टैब पर क्लिक करें. एचटीएमएल का सोर्स कोड दिखाया गया है.

   

   इमेज 16. 'जवाब' टैब

4. समय टैब पर क्लिक करें. इस संसाधन के लिए नेटवर्क गतिविधि का ब्रेकडाउन दिखाया गया है.

   

   इमेज 17. समय टैब

5. नेटवर्क लॉग फिर से देखने के लिए, बंद करें पर क्लिक करें.

   

   इमेज 18. 'बंद करें' बटन

नेटवर्क हेडर और रिस्पॉन्स खोजें

किसी खास स्ट्रिंग या रेगुलर एक्सप्रेशन के लिए एचटीटीपी हेडर और सभी रिसॉर्स के रिस्पॉन्स खोजने हों, तो खोजें पैनल का इस्तेमाल करें.

उदाहरण के लिए, मान लें कि आपको यह देखना है कि आपके संसाधन कैश मेमोरी से जुड़ी नीतियों का इस्तेमाल कर रहे हैं या नहीं.

1. खोजें पर क्लिक करें. खोज पैनल, नेटवर्क लॉग की बाईं ओर खुलता है.

   

   इमेज 19. खोज पैनल

2. Cache-Control लिखें और Enter दबाएं. खोज पैनल में Cache-Control के वे सभी इंस्टेंस शामिल होते हैं जो उसे रिसॉर्स के हेडर या कॉन्टेंट में मिलते हैं.

   

   इमेज 20. Cache-Control के लिए खोज नतीजे

3. किसी नतीजे को देखने के लिए उस पर क्लिक करें. अगर क्वेरी किसी हेडर में पाई जाती है, तो 'हेडर' टैब खुल जाता है. अगर कॉन्टेंट में क्वेरी मिलती है, तो 'जवाब' टैब खुलता है.

   

   इमेज 21. हेडर टैब में हाइलाइट किया गया खोज का नतीजा

4. खोज पैनल और समय टैब बंद करें.

   

   इमेज 22. 'बंद करें' बटन

रिसॉर्स फ़िल्टर करना

DevTools ऐसे संसाधनों को फ़िल्टर करने के लिए कई वर्कफ़्लो मुहैया कराता है जो इस टास्क के लिए काम के नहीं हैं.

इमेज 23. फ़िल्टर टूलबार

फ़िल्टर टूलबार डिफ़ॉल्ट रूप से चालू होना चाहिए. अगर ऐसा नहीं है, तो:

1. इसे दिखाने के लिए, फ़िल्टर करें पर क्लिक करें.

स्ट्रिंग, रेगुलर एक्सप्रेशन या प्रॉपर्टी के हिसाब से फ़िल्टर करें

फ़िल्टर टेक्स्ट बॉक्स में कई तरह के फ़िल्टर काम करते हैं.

1. फ़िल्टर टेक्स्ट बॉक्स में png टाइप करें. सिर्फ़ png टेक्स्ट वाली फ़ाइलें दिखाई जाती हैं. इस मामले में, सिर्फ़ PNG इमेज ही फ़िल्टर से मैच होती हैं.

   

   इमेज 24. स्ट्रिंग फ़िल्टर

2. /.*\.[cj]s+$/ टाइप करें. DevTools ऐसे सभी रिसॉर्स को फ़िल्टर कर देता है जिनके फ़ाइल नाम के आखिर में j या c नहीं होता है. इसके बाद, एक या उससे ज़्यादा s वर्ण होते हैं.

   

   इमेज 25. रेगुलर एक्सप्रेशन फ़िल्टर

3. -main.css टाइप करें. DevTools main.css को फ़िल्टर कर देता है. अगर पैटर्न से मेल खाने वाली कोई दूसरी फ़ाइल भी उस पैटर्न से मेल खाती है.

   

   इमेज 26. नेगेटिव फ़िल्टर

4. फ़िल्टर टेक्स्ट बॉक्स में domain:raw.githubusercontent.com टाइप करें. DevTools ऐसे यूआरएल वाले सभी रिसॉर्स को फ़िल्टर कर देता है जो इस डोमेन से मेल नहीं खाता.

   

   इमेज 27. प्रॉपर्टी फ़िल्टर

   फ़िल्टर की जा सकने वाली प्रॉपर्टी की पूरी सूची के लिए, प्रॉपर्टी के हिसाब से अनुरोध फ़िल्टर करें लेख पढ़ें.

5. किसी भी टेक्स्ट का फ़िल्टर टेक्स्ट बॉक्स हटाएं.

संसाधन टाइप के हिसाब से फ़िल्टर करें

स्टाइलशीट जैसी किसी खास तरह की फ़ाइल पर फ़ोकस करने के लिए:

1. सीएसएस पर क्लिक करें. बाकी सभी फ़ाइल टाइप को फ़िल्टर करके बाहर कर दिया जाता है.

   

   इमेज 28. केवल सीएसएस फ़ाइलें दिखाई जा रही हैं

2. स्क्रिप्ट देखने के लिए, Control या Command (Mac) को दबाकर रखें. इसके बाद, JS पर क्लिक करें.

   

   इमेज 29. सिर्फ़ सीएसएस और JS फ़ाइलें दिखाई जा रही हैं

3. फ़िल्टर हटाने और सभी संसाधनों को फिर से देखने के लिए, सभी पर क्लिक करें.

फ़िल्टर करने के दूसरे वर्कफ़्लो के लिए, अनुरोध फ़िल्टर करना देखें.

अनुरोध ब्लॉक करें

कुछ संसाधन उपलब्ध न होने पर, पेज कैसा दिखता है और कैसा काम करता है? क्या यह पूरी तरह से काम नहीं कर रहा है या यह अब भी काम कर रहा है? यह जानने के लिए अनुरोधों को ब्लॉक करें:

1. Command मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं.

   

   इमेज 30. निर्देश मेन्यू

2. block टाइप करें और अनुरोध को ब्लॉक करने का अनुरोध दिखाएं को चुनें. इसके बाद, Enter दबाएं.

   

   इमेज 31. ब्लॉक करने के अनुरोध दिखाएं

3. पैटर्न जोड़ें पर क्लिक करें.

4. main.css टाइप करें.

   

   इमेज 32. main.css को ब्लॉक किया जा रहा है

5. जोड़ें पर क्लिक करें.

6. पेज को फिर से लोड करें. उम्मीद के मुताबिक, पेज की स्टाइल में थोड़ी गड़बड़ी है, क्योंकि इसकी मुख्य स्टाइलशीट को ब्लॉक कर दिया गया है. नेटवर्क लॉग में main.css पंक्ति को नोट करें. लाल रंग के टेक्स्ट का मतलब है कि संसाधन ब्लॉक था.

   

   इमेज 33. main.css को ब्लॉक कर दिया गया है

7. अनुरोध को ब्लॉक करने की सुविधा चालू करें चेकबॉक्स से सही का निशान हटाएं.

अगले चरण

बधाई हो, आपने ट्यूटोरियल पूरा कर लिया है. अपना इनाम पाने के लिए, Dispense Award पर क्लिक करें.

नेटवर्क गतिविधि की जांच करने से जुड़ी DevTools की अन्य सुविधाओं के बारे में जानने के लिए, नेटवर्क रेफ़रंस देखें.