इस कोडलैब में, आपको किसी मुश्किल सैंपल ऐप्लिकेशन के लिए, नेटवर्क ट्रैफ़िक को समझने की प्रोसेस के बारे में बताया गया है. इस एक्सरसाइज़ के आखिर में, आपके पास यह पता लगाने की ज़रूरी स्किल होंगी कि आपका वेब ऐप्लिकेशन क्या लोड कर रहा है और वह हर अनुरोध कब कर रहा है.
नेटवर्क पैनल पर जाना
डेमो ऐप्लिकेशन का नेटवर्क ट्रैफ़िक देखने के लिए, नेटवर्क पैनल पर जाएं.
साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
नेटवर्क टैब पर क्लिक करें.
नेटवर्क ट्रैफ़िक देखने के लिए, पेज को फिर से लोड करें.
नेटवर्क पैनल में, शुरुआती नेविगेशन की वजह से लोड हुई सभी एसेट दिखती हैं:
एंट्री को समझने का तरीका
रिकॉर्ड किए गए नेटवर्क ट्रैफ़िक की हर लाइन, एक अनुरोध और रिस्पॉन्स के जोड़े को दिखाती है.
document टाइप वाली पहली पंक्ति, वेब ऐप्लिकेशन के एचटीएमएल के लिए, नेविगेशन का शुरुआती अनुरोध है. यह वॉटरफ़ॉल का सोर्स होता है. इसके बाद, अन्य ऐसेट (जिन्हें मुख्य दस्तावेज़ के सब-रिसॉर्स कहा जाता है) के लिए किए जाने वाले हर अनुरोध, इस ओरिजनल सोर्स से फ़्लो होते हैं.
दूसरी और तीसरी लाइन में, लोड की जा रही सीएसएस stylesheet और script सब-रिसॉर्स दिख रहे हैं. ये ऐसे अनुरोध हैं जो मुख्य दस्तावेज़ से शुरू किए गए थे.
वॉटरफ़ॉल डायग्राम से पता चलता है कि ये अनुरोध कब किए जाते हैं. इनसे पता चलता है कि नेविगेशन अनुरोध का जवाब देने की प्रोसेस में बहुत देर तक ये अनुरोध शुरू नहीं किए जाते.
शुरुआती नेविगेशन के दौरान पूरा पेज दिखाने के लिए, एचटीएमएल दस्तावेज़, सीएसएस, और JavaScript के अनुरोधों की ज़रूरत होती है.
कुछ और रनटाइम अनुरोध बनाना
नेटवर्क पैनल अब भी खुला है और रिकॉर्डिंग जारी है. अब कई वेब ऐप्लिकेशन के लिए आम तौर पर होने वाली प्रोसेस को सिम्युलेट करने का समय आ गया है: शुरुआती नेविगेशन पूरा होने के बाद, पेज में ज़्यादा डेटा जोड़ने के लिए इस्तेमाल किए जाने वाले अतिरिक्त एपीआई अनुरोध.
इन अतिरिक्त अनुरोधों को ट्रिगर करने के लिए, ऐप्लिकेशन में मुझे ढूंढें पर क्लिक करें. इसके बाद, दिखने वाले पॉप-अप में अनुमति दें पर क्लिक करें. इससे साइट को आपकी मौजूदा जगह की जानकारी ऐक्सेस करने की अनुमति मिल जाएगी:
जब वेब ऐप्लिकेशन के पास काम करने के लिए कोई जगह हो जाती है, तो आस-पास मौजूद Wikipedia की एंट्री ढूंढें पर क्लिक करने से, कई और नेटवर्क अनुरोध किए जाते हैं. आपको कुछ ऐसा दिखेगा:
नई एंट्री को समझना
पहले की तरह, रिकॉर्ड किए गए नेटवर्क ट्रैफ़िक की हर पंक्ति में एक अनुरोध और रिस्पॉन्स पेयर होता है.
नई एंट्री की पहली लाइन में, fetch टाइप वाला अनुरोध दिखता है. यह अनुरोध, Wikipedia API से वेब ऐप्लिकेशन के डेटा का अनुरोध करने के तरीके से मेल खाता है.
नीचे दी गई सभी पंक्तियां, विकिपीडिया की एंट्री से जुड़ी इमेज (png या jpeg) हैं. स्क्रीनशॉट से यह समझना थोड़ा मुश्किल है, लेकिन वॉटरफ़ॉल कॉलम में उनकी एंट्री, सीधे एपीआई के जवाब से फ़्लो होती हैं.
इन सभी अतिरिक्त अनुरोधों के लिए, कब अलग-अलग होगा. यह इस बात पर निर्भर करता है कि आस-पास के Wikipedia एंट्री ढूंढें पर क्लिक करने से पहले, आपने पेज को कितनी देर तक खोला रखा था. यहां सबसे ज़रूरी बात यह है कि when, शुरुआती नेविगेशन अनुरोध से डिसकनेक्ट हो गया है. वॉटरफ़ॉल डिसप्ले में मौजूद बड़े गैप से, यह पता चलता है कि शुरुआती लोडिंग और Wikipedia API का अनुरोध करने के बीच कितना समय बीत गया.
नेविगेशन के बाद कुछ समय के अंतराल के बाद किए गए अनुरोध, "रनटाइम अनुरोध" की कैटगरी में आते हैं. ये अनुरोध, पेज पर पहली बार नेविगेट करने के दौरान इस्तेमाल किए गए अनुरोधों के शुरुआती सेट से अलग होते हैं.
खास जानकारी
इस कोडलैब में दिए गए चरणों को पूरा करने के बाद, अब आपको उन टूल के बारे में पता है जिनका इस्तेमाल करके, यह विश्लेषण किया जा सकता है कि कोई भी वेब ऐप्लिकेशन क्या लोड करता है.
नेटवर्क पैनल की मदद से, यह पता लगाया जा सकता है कि क्या लोड हो रहा है. इसके लिए, नाम कॉलम में मौजूद यूआरएल और टाइप कॉलम में मौजूद डेटा का इस्तेमाल किया जाता है. साथ ही, वॉटरफ़ॉल डिसप्ले की मदद से यह भी पता लगाया जा सकता है कि कब लोड हो रहा है.
आपने यह भी देखा है कि किसी वेब पेज से किए गए अनुरोधों को आम तौर पर, इनमें से किसी एक कैटगरी में रखा जा सकता है:
- एचटीएमएल, JavaScript, सीएसएस (और संभावित रूप से अन्य ऐसेट) के लिए, नए पेज पर जाने के तुरंत बाद किए गए शुरुआती अनुरोध.
- पेज पर उपयोगकर्ता के इंटरैक्शन की वजह से किए गए रनटाइम अनुरोध. यह प्रोसेस, अक्सर किसी एपीआई के अनुरोध से शुरू हो सकती है. इसके बाद, एपीआई से मिले डेटा के आधार पर कई फ़ॉलो-अप अनुरोध किए जा सकते हैं.