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