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