यह ट्यूटोरियल, DevTools की उन सुविधाओं के बारे में है जिनका इस्तेमाल आम तौर पर किया जाता है. इनकी मदद से, किसी पेज की नेटवर्क गतिविधि की जांच की जा सकती है.
अगर आपको सुविधाओं के बारे में ब्राउज़ करना है, तो नेटवर्क रेफ़रंस देखें.
ज़्यादा जानने के लिए, आगे पढ़ें या इस ट्यूटोरियल का वीडियो वर्शन देखें:
Network पैनल का इस्तेमाल कब करें
आम तौर पर, Network पैनल का इस्तेमाल तब करें, जब आपको यह पक्का करना हो कि संसाधन, उम्मीद के मुताबिक डाउनलोड या अपलोड हो रहे हैं. Network पैनल के इस्तेमाल के सबसे सामान्य उदाहरण यहां दिए गए हैं:
- यह पक्का करना कि संसाधन वाकई में अपलोड या डाउनलोड हो रहे हैं या नहीं.
- किसी संसाधन की प्रॉपर्टी की जांच करना. जैसे, उसके एचटीटीपी हेडर, कॉन्टेंट, साइज़ वगैरह.
अगर आपको पेज लोड होने की परफ़ॉर्मेंस को बेहतर बनाने के तरीके चाहिए, तो Network पैनल से शुरुआत न करें. लोड होने की परफ़ॉर्मेंस से जुड़ी कई समस्याएं होती हैं, जिनका नेटवर्क गतिविधि से कोई लेना-देना नहीं होता. Lighthouse पैनल से शुरुआत करें, क्योंकि यह आपको अपने पेज को बेहतर बनाने के बारे में टारगेट किए गए सुझाव देता है. वेबसाइट की स्पीड ऑप्टिमाइज़ करें लेख देखें .
Network पैनल खोलना
इस ट्यूटोरियल से ज़्यादा फ़ायदा पाने के लिए, डेमो खोलें और डेमो पेज पर मौजूद सुविधाओं को आज़माएं.
Get Started डेमो खोलें.
आपके पास डेमो को किसी दूसरी विंडो में ले जाने का विकल्प होता है.
Control+Shift+J या Command+Option+J (Mac) दबाकर, DevTools खोलें. Console पैनल खुलता है.
आपके पास DevTools को अपनी विंडो के सबसे नीचे डॉक करने का विकल्प होता है.
Network टैब पर क्लिक करें. Network पैनल खुलता है.
फ़िलहाल, Network पैनल खाली है. ऐसा इसलिए है, क्योंकि DevTools सिर्फ़ तब नेटवर्क गतिविधि को लॉग करता है, जब वह खुला होता है. साथ ही, DevTools खोलने के बाद से कोई नेटवर्क गतिविधि नहीं हुई है.
नेटवर्क पर की गई गतिविधियों को लॉग करना
किसी पेज की वजह से होने वाली नेटवर्क गतिविधि देखने के लिए:
पेज को फिर से लोड करें. Network पैनल, Network Log में सभी नेटवर्क गतिविधियों को लॉग करता है.
Network Log की हर लाइन, किसी संसाधन को दिखाती है. डिफ़ॉल्ट रूप से, संसाधनों को समय के क्रम में दिखाया जाता है. सबसे ऊपर मौजूद संसाधन आम तौर पर, मुख्य एचटीएमएल दस्तावेज़ होता है. सबसे नीचे मौजूद संसाधन वह होता है जिसके लिए सबसे आखिर में अनुरोध किया गया हो.
हर कॉलम, किसी संसाधन के बारे में जानकारी दिखाता है. डिफ़ॉल्ट कॉलम ये होते हैं:
- स्टेटस: एचटीटीपी रिस्पॉन्स कोड.
- टाइप: संसाधन का टाइप.
- Initiator: किसी संसाधन के लिए अनुरोध करने की वजह. Initiator कॉलम में मौजूद किसी लिंक पर क्लिक करने से, आपको उस सोर्स कोड पर ले जाया जाता है जिसकी वजह से अनुरोध किया गया था.
- Size: नेटवर्क पर ट्रांसफ़र किए गए संसाधन की मात्रा.
- समय: अनुरोध पूरा होने में लगने वाला समय.
जब तक DevTools खुला रहेगा, तब तक वह Network Log में नेटवर्क गतिविधि रिकॉर्ड करता रहेगा. इसे दिखाने के लिए, सबसे पहले Network Log के सबसे नीचे देखें और आखिरी गतिविधि को नोट करें.
अब डेमो में, Get Data बटन पर क्लिक करें.
Network Log के सबसे नीचे फिर से देखें.
getstarted.jsonनाम का एक नया संसाधन मौजूद है. Get Data बटन पर क्लिक करने से, पेज ने इस फ़ाइल के लिए अनुरोध किया.
ज़्यादा जानकारी दिखाएं
Network Log के कॉलम को कॉन्फ़िगर किया जा सकता है. आपके पास उन कॉलम को छिपाने का विकल्प होता है जिनका इस्तेमाल नहीं किया जा रहा है. डिफ़ॉल्ट रूप से, कई कॉलम छिपे होते हैं. ये आपके काम के हो सकते हैं.
Network Log टेबल के हेडर पर राइट क्लिक करें और Domain चुनें. अब हर संसाधन का डोमेन दिखाया जाता है.
धीमे नेटवर्क कनेक्शन को सिम्युलेट करना
साइटें बनाने के लिए इस्तेमाल किए जाने वाले कंप्यूटर का नेटवर्क कनेक्शन, आपके उपयोगकर्ताओं के मोबाइल डिवाइस के नेटवर्क कनेक्शन से ज़्यादा तेज़ हो सकता है. पेज को थ्रॉटल करके, यह बेहतर तरीके से जाना जा सकता है कि किसी पेज को मोबाइल डिवाइस पर लोड होने में कितना समय लगता है.
थ्रॉटलिंग ड्रॉप-डाउन पर क्लिक करें. यह डिफ़ॉल्ट रूप से No throttling पर सेट होता है.
3G चुनें.
रीलोड करें को दबाकर रखें. इसके बाद, कैश और हार्ड रिलोड खाली करें को चुनें.
बार-बार विज़िट करने पर, ब्राउज़र आम तौर पर कुछ फ़ाइलें अपनी कैश मेमोरी से दिखाता है. इससे पेज लोड होने की स्पीड बढ़ जाती है. कैश और हार्ड रिलोड खाली करें की मदद से, ब्राउज़र को सभी संसाधनों के लिए नेटवर्क पर जाने के लिए मजबूर किया जाता है. यह तब काम आता है, जब आपको यह देखना हो कि पहली बार विज़िट करने वाले व्यक्ति को पेज लोड होने का कैसा अनुभव मिलता है.
स्क्रीनशॉट लेना
स्क्रीनशॉट से पता चलता है कि पेज लोड होने के दौरान, अलग-अलग समय पर कैसा दिखता है. साथ ही, यह भी पता चलता है कि हर इंटरवल पर कौनसे संसाधन लोड होते हैं.
स्क्रीनशॉट लेने के लिए, यह तरीका अपनाएं:
नेटवर्क सेटिंग पर क्लिक करें.
स्क्रीनशॉट चेकबॉक्स को चालू करें.
कैश और हार्ड रिलोड खाली करें की सुविधा का इस्तेमाल करके, पेज को फिर से लोड करें. अगर आपको यह याद नहीं है कि इसे कैसे किया जाता है, तो धीमे कनेक्शन को सिम्युलेट करना लेख देखें. स्क्रीनशॉट टैब में, लोड होने की प्रोसेस के दौरान अलग-अलग समय पर पेज कैसा दिखता था, इसके थंबनेल दिखते हैं.
पहले थंबनेल पर क्लिक करें. DevTools आपको दिखाता है कि उस समय नेटवर्क पर कौनसी गतिविधि हो रही थी.
स्क्रीनशॉट टैब को बंद करने के लिए, स्क्रीनशॉट चेकबॉक्स को टॉगल करें.
पेज को फिर से लोड करें.
किसी संसाधन की जानकारी की जांच करना
किसी संसाधन के बारे में ज़्यादा जानकारी पाने के लिए, उस पर क्लिक करें. इसे अभी आज़माएं:
getstarted.htmlपर क्लिक करें. Headers टैब दिखता है. एचटीटीपी हेडर की जांच करने के लिए, इस टैब का इस्तेमाल करें.
एचटीएमएल रेंडरिंग का बुनियादी वर्शन देखने के लिए, Preview टैब पर क्लिक करें.
यह टैब तब काम आता है, जब कोई एपीआई एचटीएमएल में गड़बड़ी का कोड दिखाता है और एचटीएमएल सोर्स कोड के मुकाबले, रेंडर किए गए एचटीएमएल को पढ़ना आसान होता है. इसके अलावा, यह टैब इमेज की जांच करते समय भी काम आता है.
एचटीएमएल सोर्स कोड देखने के लिए, Response टैब पर क्लिक करें.
अनुरोध शुरू करने वाली चेन का मैप दिखाने वाला ट्री देखने के लिए, Initiator टैब पर क्लिक करें.
इस संसाधन के लिए नेटवर्क गतिविधि का ब्रेकडाउन देखने के लिए, Timing टैब पर क्लिक करें.
Network Log को फिर से देखने के लिए, बंद करें पर क्लिक करें.
नेटवर्क हेडर और रिस्पॉन्स खोजना
Search टैब का इस्तेमाल तब करें, जब आपको किसी खास स्ट्रिंग या रेगुलर एक्सप्रेशन के लिए, सभी संसाधनों के एचटीटीपी हेडर और रिस्पॉन्स खोजने हों.
उदाहरण के लिए, मान लें कि आपको यह देखना है कि आपके संसाधन, सही कैश मेमोरी से जुड़ी नीतियां इस्तेमाल कर रहे हैं या नहीं.
पैनल के ऐक्शन बार में Search पर क्लिक करें या Command + F (macOS) या Control + F (Windows / Linux) दबाएं.
Search टैब, Network log की बाईं ओर खुलता है.
Cache-Controlटाइप करें और Enter दबाएं. Search टैब,Cache-Controlके उन सभी इंस्टेंस की सूची दिखाता है जो उसे संसाधन के हेडर या कॉन्टेंट में मिलते हैं.
किसी नतीजे को देखने के लिए, उस पर क्लिक करें. अगर क्वेरी, हेडर में मिली है, तो Headers टैब खुलता है. अगर क्वेरी, कॉन्टेंट में मिली है, तो Response टैब खुलता है.
Search टैब और Headers टैब को बंद करें.
रिसॉर्स फ़िल्टर करना
DevTools, उन संसाधनों को फ़िल्टर करने के लिए कई तरीके उपलब्ध कराता है जो मौजूदा टास्क के लिए काम के नहीं हैं.
Filters टूलबार, डिफ़ॉल्ट रूप से चालू होना चाहिए. अगर ऐसा नहीं है, तो:
- इसे दिखाने के लिए, फ़िल्टर करें पर क्लिक करें.
स्ट्रिंग, रेगुलर एक्सप्रेशन या प्रॉपर्टी के हिसाब से फ़िल्टर करना
Filter इनपुट बॉक्स में, कई अलग-अलग तरह से फ़िल्टर किया जा सकता है.
Filter इनपुट बॉक्स में
pngटाइप करें. सिर्फ़ वे फ़ाइलें दिखती हैं जिनमेंpngटेक्स्ट शामिल होता है. इस मामले में, फ़िल्टर से मैच होने वाली सिर्फ़ PNG इमेज हैं.
/.*\.[cj]s+$/टाइप करें. DevTools, ऐसे किसी भी संसाधन को फ़िल्टर कर देता है जिसके फ़ाइल नाम के आखिर मेंjयाcके बाद एक या उससे ज़्यादाsवर्ण नहीं होते.
-main.cssटाइप करें. DevTools,main.cssको फ़िल्टर कर देता है. अगर कोई अन्य फ़ाइल, पैटर्न से मैच होती है, तो उसे भी फ़िल्टर कर दिया जाएगा.
Filter टेक्स्ट बॉक्स में
domain:raw.githubusercontent.comटाइप करें. DevTools, ऐसे किसी भी संसाधन को फ़िल्टर कर देता है जिसका यूआरएल इस डोमेन से मैच नहीं होता.
फ़िल्टर की जा सकने वाली प्रॉपर्टी की पूरी सूची देखने के लिए, प्रॉपर्टी के हिसाब से अनुरोध फ़िल्टर करना लेख देखें.
Filter इनपुट बॉक्स में मौजूद सभी टेक्स्ट मिटाएं.
संसाधन के टाइप के हिसाब से फ़िल्टर करना
किसी खास टाइप की फ़ाइल पर फ़ोकस करने के लिए, जैसे कि स्टाइलशीट:
CSS पर क्लिक करें. अन्य सभी फ़ाइल टाइप फ़िल्टर कर दिए जाते हैं.
स्क्रिप्ट भी देखने के लिए, Control या Command (Mac) दबाकर रखें. इसके बाद, JS पर क्लिक करें.
फ़िल्टर हटाने और सभी संसाधन फिर से देखने के लिए, All पर क्लिक करें.
फ़िल्टर करने के अन्य तरीकों के लिए, अनुरोध फ़िल्टर करना लेख देखें.
अनुरोध ब्लॉक करना
जब किसी पेज के कुछ संसाधन उपलब्ध नहीं होते हैं, तो वह कैसा दिखता है और कैसा काम करता है? क्या वह पूरी तरह से काम करना बंद कर देता है या वह अब भी कुछ हद तक काम करता है? यह जानने के लिए, अनुरोध ब्लॉक करें:
कमांड मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं.
blockटाइप करें, Show Request Blocking को चुनें, और Enter दबाएं.
Add Pattern बटन पर क्लिक करें.
main.cssटाइप करें.
Add पर क्लिक करें.
पेज को फिर से लोड करें. उम्मीद के मुताबिक, पेज की स्टाइलिंग थोड़ी गड़बड़ हो गई है, क्योंकि उसकी मुख्य स्टाइल शीट ब्लॉक कर दी गई है. Network Log में
main.cssवाली लाइन देखें. लाल टेक्स्ट का मतलब है कि संसाधन ब्लॉक कर दिया गया है.
Enable request blocking चेकबॉक्स को साफ़ करें.
नेटवर्क गतिविधि की जांच से जुड़ी DevTools की अन्य सुविधाओं के बारे में जानने के लिए, नेटवर्क रेफ़रंस देखें.