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

कायस बास्क
कायस बैस्क

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

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

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

नेटवर्क पैनल का इस्तेमाल कब करना चाहिए

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

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

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

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

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

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

    डेमो

    पहला डायग्राम. डेमो

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

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

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

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

    कंसोल

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

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

    DevTools को विंडो के सबसे नीचे डॉक किया गया है

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

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

    DevTools को विंडो के सबसे नीचे डॉक किया गया है

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

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

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

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

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

    नेटवर्क लॉग

    छठा डायग्राम. नेटवर्क लॉग

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

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

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

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

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

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

    नेटवर्क लॉग में एक नया संसाधन

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

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

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

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

    डोमेन कॉलम सक्षम करना

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

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

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

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

    थ्रॉटलिंग चालू करना

    आकृति 9. थ्रॉटलिंग चालू करना

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

    धीमा 3G चुनना

    आकृति 10. धीमा 3G चुनना

  3. Reload फिर से लोड करें को दबाकर रखें और फिर खाली cache And Hard Reload को चुनें.

    कैश मेमोरी और हार्ड रीलोड खाली करें

    इमेज 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 पर क्लिक करें.

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

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

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

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

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

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

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

    निर्देश मेन्यू

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

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

    ब्लॉक करने के अनुरोध को दिखाएं

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

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

  4. main.css टाइप.

    men.css को ब्लॉक किया जा रहा है

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

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

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

    men.css को ब्लॉक कर दिया गया है

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

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

अगले चरण

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

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