नेटवर्क की सुविधाओं का रेफ़रंस

Chrome DevTools की नेटवर्क विश्लेषण सुविधाओं के इस रेफ़रंस में, पेज लोड होने के तरीके का विश्लेषण करने के नए तरीके जानें.

नेटवर्क के अनुरोध रिकॉर्ड करना

DevTools के खुले रहने तक, यह डिफ़ॉल्ट रूप से नेटवर्क पैनल में नेटवर्क के सभी अनुरोधों को रिकॉर्ड करता है.

नेटवर्क के अनुरोधों को रिकॉर्ड करना बंद करना

रिकॉर्डिंग के अनुरोध रोकने के लिए:

• नेटवर्क पैनल पर, नेटवर्क लॉग की रिकॉर्डिंग बंद करें पर क्लिक करें. यह धूसर हो जाता है. इसका मतलब है कि DevTools अब अनुरोधों को रिकॉर्ड नहीं कर रहा है.
• नेटवर्क पैनल पर फ़ोकस करते समय, Command> + E (Mac) या Control + E (Windows, Linux) दबाएं.

अनुरोधों को मिटाना

अनुरोध टेबल से सभी अनुरोधों को हटाने के लिए, नेटवर्क पैनल पर मौजूद, हटाएं पर क्लिक करें.

पेज लोड होने के दौरान अनुरोधों को सेव करना

पेज लोड होने के दौरान अनुरोधों को सेव करने के लिए, नेटवर्क पैनल पर मौजूद लॉग को सेव रखें चेकबॉक्स पर सही का निशान लगाएं. जब तक Preserve log बंद नहीं किया जाता, तब तक DevTools सभी अनुरोधों को सेव करता है.

पेज लोड होने के दौरान स्क्रीनशॉट कैप्चर करना

स्क्रीनशॉट कैप्चर करें, ताकि यह पता लगाया जा सके कि पेज लोड होने के दौरान उपयोगकर्ताओं को क्या दिखता है.

स्क्रीनशॉट लेने की सुविधा चालू करने के लिए, नेटवर्क पैनल में जाकर सेटिंग खोलें. इसके बाद, स्क्रीनशॉट कैप्चर करें को चुनें.

स्क्रीनशॉट कैप्चर करने के लिए, नेटवर्क पैनल पर फ़ोकस करते हुए पेज को फिर से लोड करें.

स्क्रीनशॉट लेने के बाद, उनके साथ इन तरीकों से इंटरैक्ट किया जा सकता है:

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

किसी अनुरोध में बदलाव करना और उसे फिर से भेजना

आप अनुरोध टेबल में जाकर, फ़ेच किए जा सकने वाले किसी भी नेटवर्क का अनुरोध में बदलाव कर सकते हैं और उसे फिर से भेज सकते हैं:

1. अनुरोध पर राइट क्लिक करें और फ़ेच के तौर पर बदलाव करें और फिर से भेजें को चुनें. DevTools, कंसोल ड्रॉअर खोलता है. इसमें अनुरोध को fetch() कॉल के तौर पर दिखाया जाता है. साथ ही, अनुरोध के मूल पैरामीटर और एक्ज़ीक्यूशन कॉन्टेक्स्ट को सुरक्षित रखा जाता है.
2. इसके अलावा, कंसोल में fetch() कॉल में बदलाव करें. इसके बाद, अनुरोध को फिर से भेजने के लिए, Enter दबाएं.

लोड होने के तरीके में बदलाव करना

ब्राउज़र की कैश मेमोरी को सेव होने देने का विकल्प बंद करके, वेबसाइट पर पहली बार आने वाले व्यक्ति जैसा अनुभव पाएं

पहली बार इस्तेमाल करने वाले उपयोगकर्ता को आपकी साइट का अनुभव कैसा मिलता है, यह जानने के लिए कैश मेमोरी बंद करें चेकबॉक्स को चुनें. DevTools, ब्राउज़र की कैश मेमोरी की सुविधा बंद कर देता है. इससे, पहली बार इस्तेमाल करने वाले उपयोगकर्ता के अनुभव को ज़्यादा सटीक तरीके से समझा जा सकता है. ऐसा इसलिए, क्योंकि बार-बार आने वाले उपयोगकर्ताओं के अनुरोधों को ब्राउज़र कैश से पूरा किया जाता है.

नेटवर्क की स्थिति वाले पैनल से ब्राउज़र कैश मेमोरी को बंद करना

अगर आपको DevTools के अन्य पैनल में काम करते समय कैश मेमोरी को बंद करना है, तो नेटवर्क की स्थिति पैनल का इस्तेमाल करें.

1. नेटवर्क की स्थितियां ड्रॉवर खोलने के लिए, आइकॉन पर क्लिक करें.
2. कैश मेमोरी की सुविधा बंद करें चेकबॉक्स पर सही का निशान लगाएं या हटाएं.

ब्राउज़र की कैश मेमोरी को मैन्युअल तरीके से मिटाना

ब्राउज़र की कैश मेमोरी को मैन्युअल तरीके से मिटाने के लिए, अनुरोध टेबल में कहीं भी राइट क्लिक करें. इसके बाद, ब्राउज़र की कैश मेमोरी मिटाएं को चुनें.

ऑफ़लाइन मोड को सिम्युलेट करना

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

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

DevTools, नेटवर्क टैब के बगल में चेतावनी वाला आइकॉन दिखाता है. इससे आपको याद रहता है कि ऑफ़लाइन मोड चालू है.

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

तेज़ 4G, धीमी 4G या 3G की स्पीड को एम्युलेट करने के लिए, सबसे ऊपर मौजूद कार्रवाई बार में, थ्रॉटलिंग ड्रॉप-डाउन मेन्यू से उससे जुड़ा प्रीसेट चुनें.

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

DevTools, नेटवर्क पैनल के बगल में चेतावनी वाला आइकॉन दिखाता है. इससे आपको याद रहता है कि थ्रॉटलिंग चालू है.

थ्रॉटलिंग की कस्टम प्रोफ़ाइलें बनाना

स्लो या फ़ास्ट 4G जैसे प्रीसेट के अलावा, अपनी कस्टम थ्रॉटलिंग प्रोफ़ाइलें भी जोड़ी जा सकती हैं:

1. थ्रॉटलिंग मेन्यू खोलें और कस्टम > जोड़ें... को चुनें.
2. सेटिंग सेटिंग > थ्रॉटलिंग में बताए गए तरीके से, नई थ्रॉटलिंग प्रोफ़ाइल सेट अप करें.

3. Network पैनल पर वापस जाएं. इसके बाद, Throttling ड्रॉप-डाउन मेन्यू से अपनी नई प्रोफ़ाइल चुनें.

   

DevTools, नेटवर्क पैनल के बगल में चेतावनी वाला आइकॉन दिखाता है. इससे आपको याद रहता है कि थ्रॉटलिंग की सुविधा चालू है.

WebSocket कनेक्शन को थ्रॉटल करें

DevTools, एचटीटीपी अनुरोधों के साथ-साथ WebSocket कनेक्शन को भी थ्रॉटल करता है. यह सुविधा, वर्शन 99 से उपलब्ध है.

WebSocket थ्रॉटलिंग को देखने के लिए:

1. कोई नया कनेक्शन शुरू करें. उदाहरण के लिए, टेस्ट टूल का इस्तेमाल करके.
2. नेटवर्क पैनल पर, कोई थ्रॉटलिंग नहीं को चुनें और कनेक्शन के ज़रिए मैसेज भेजें.
3. बहुत धीमी कस्टम थ्रॉटलिंग प्रोफ़ाइल बनाएं. उदाहरण के लिए, 10 kbit/s. इस तरह की धीमी प्रोफ़ाइल से, आपको अंतर समझने में मदद मिलेगी.
4. नेटवर्क पैनल पर, प्रोफ़ाइल चुनें और दूसरा मैसेज भेजें.
5. WS फ़िल्टर को टॉगल करें, अपने कनेक्शन के नाम पर क्लिक करें, मैसेज टैब खोलें, और थ्रॉटलिंग के साथ और थ्रॉटलिंग के बिना भेजे गए और गूंजे गए मैसेज के बीच के समय के अंतर की जांच करें. उदाहरण के लिए:

नेटवर्क की स्थिति वाले ड्रॉअर से, धीमे इंटरनेट कनेक्शन को एम्युलेट करना

अगर आपको DevTools के अन्य पैनल में काम करते समय इंटरनेट कनेक्शन को थ्रॉटल करना है, तो नेटवर्क की स्थिति पैनल का इस्तेमाल करें.

1. नेटवर्क की स्थितियां ड्रॉवर खोलने के लिए, आइकॉन पर क्लिक करें.
2. नेटवर्क थ्रॉटलिंग मेन्यू से कोई कनेक्शन स्पीड चुनें.

ब्राउज़र की कुकी को मैन्युअल तरीके से मिटाना

ब्राउज़र की कुकी को मैन्युअल तरीके से कभी भी हटाने के लिए, अनुरोध टेबल में कहीं भी राइट क्लिक करें. इसके बाद, ब्राउज़र की कुकी हटाएं को चुनें.

एचटीटीपी रिस्पॉन्स हेडर बदलना

फ़ाइलों और एचटीटीपी रिस्पॉन्स हेडर को स्थानीय तौर पर बदलना देखें.

उपयोगकर्ता एजेंट को बदलना

उपयोगकर्ता एजेंट को मैन्युअल तरीके से बदलने के लिए:

1. नेटवर्क की स्थितियां ड्रॉवर खोलने के लिए, आइकॉन पर क्लिक करें.
2. अपने-आप चुनें से सही का निशान हटाएं.
3. मेन्यू से कोई उपयोगकर्ता एजेंट विकल्प चुनें या बॉक्स में कोई कस्टम विकल्प डालें.

खोज के अनुरोध

अनुरोध के हेडर, पेलोड, और रिस्पॉन्स खोजने के लिए:

1. दाईं ओर मौजूद खोजें टैब खोलने के लिए, यह शॉर्टकट दबाएं:

   • macOS पर, Command + F दबाएं.
   • Windows या Linux पर, Control + F.

2. खोजें टैब में, अपनी क्वेरी डालें और Enter दबाएं. केस सेंसिटिविटी या रेगुलर एक्सप्रेशन को चालू करने के लिए, match_case या regular_expression पर क्लिक करें. हालांकि, ऐसा करना ज़रूरी नहीं है.

3. खोज के किसी नतीजे पर क्लिक करें. नेटवर्क पैनल, मैच होने वाले अनुरोध को पीले रंग में हाइलाइट करता है. इसके अलावा, पैनल Headers या Response टैब भी खोलता है. साथ ही, अगर कोई स्ट्रिंग मैच होती है, तो उसे हाइलाइट करता है.

खोज के नतीजों को रीफ़्रेश करने के लिए, रीफ़्रेश करें रीफ़्रेश करें पर क्लिक करें. नतीजे मिटाने के लिए, ब्लॉक करें मिटाएं पर क्लिक करें.

DevTools में खोजने के सभी तरीकों के बारे में ज़्यादा जानने के लिए, खोजें: लोड किए गए सभी संसाधनों में टेक्स्ट ढूंढें लेख पढ़ें.

अनुरोधों को फ़िल्टर करना

प्रॉपर्टी के हिसाब से अनुरोधों को फ़िल्टर करना

प्रॉपर्टी के हिसाब से अनुरोधों को फ़िल्टर करने के लिए, फ़िल्टर बॉक्स का इस्तेमाल करें. जैसे, अनुरोध का डोमेन या साइज़. इसके अलावा, अनुरोध के यूआरएल, डोमेन, होस्टनेम या पोर्ट (उदाहरण के लिए, localhost या example.com) से मैच करने वाली टेक्स्ट स्ट्रिंग डालें. इसमें एक ही साइट से किए गए अनुरोध भी शामिल हैं.

अगर आपको बॉक्स नहीं दिख रहा है, तो हो सकता है कि फ़िल्टर बार छिपा हो. फ़िल्टर बार छिपाना देखें.

फ़िल्टर को उलटने के लिए, फ़िल्टर बॉक्स के बगल में मौजूद, उलटें चेकबॉक्स को चुनें.

एक साथ कई प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसके लिए, हर प्रॉपर्टी को स्पेस से अलग करें. उदाहरण के लिए, mime-type:image/gif larger-than:1K एक किलोबाइट से बड़े सभी GIF दिखाता है. एक से ज़्यादा प्रॉपर्टी वाले ये फ़िल्टर, AND ऑपरेशन की तरह काम करते हैं. OR ऑपरेटर का इस्तेमाल नहीं किया जा सकता.

इसके बाद, इस्तेमाल की जा सकने वाली प्रॉपर्टी की पूरी सूची दी गई है.

• cookie-domain. उन संसाधनों को दिखाएं जो किसी खास कुकी डोमेन को सेट करते हैं.
• cookie-name. वे संसाधन दिखाएं जो किसी खास कुकी का नाम सेट करते हैं.
• cookie-path. उन संसाधनों को दिखाएं जो किसी खास कुकी पाथ को सेट करते हैं.
• cookie-value. उन संसाधनों को दिखाएं जो कोई खास कुकी वैल्यू सेट करते हैं.
• domain. सिर्फ़ तय किए गए डोमेन के संसाधन दिखाएं. एक से ज़्यादा डोमेन शामिल करने के लिए, वाइल्डकार्ड वर्ण (*) का इस्तेमाल किया जा सकता है. उदाहरण के लिए, *.com में उन सभी डोमेन नेम के संसाधन दिखते हैं जिनके आखिर में .com है. DevTools, अपने-आप पूरा होने वाले ड्रॉप-डाउन मेन्यू में उन सभी डोमेन को दिखाता है जो उसे मिले हैं.
• has-overrides. ऐसे अनुरोध दिखाएं जिनमें content, headers, कोई भी बदलाव (yes) या कोई बदलाव नहीं (no) को बदला गया है. अनुरोध टेबल में, इससे जुड़ा बदलाव मौजूद हैं कॉलम जोड़ा जा सकता है.
• has-response-header. उन संसाधनों को दिखाएं जिनमें बताया गया एचटीटीपी रिस्पॉन्स हेडर मौजूद है. DevTools, ऑटोकंप्लीट ड्रॉप-डाउन में उन सभी रिस्पॉन्स हेडर की जानकारी भरता है जो उसे मिले हैं.
• is. WebSocket संसाधन ढूंढने के लिए, is:running का इस्तेमाल करें.
• larger-than. तय किए गए साइज़ से बड़े संसाधन दिखाएं. साइज़ बाइट में होता है. 1000 की वैल्यू सेट करना, 1k की वैल्यू सेट करने के बराबर है.
• method. ऐसे संसाधन दिखाएं जिन्हें एचटीटीपी के किसी खास तरीके से वापस लाया गया था. DevTools, अपने-आप पूरा होने वाले ड्रॉप-डाउन में, उन सभी एचटीटीपी तरीकों को भरता है जो उसे मिले हैं.
• mime-type. इससे किसी खास एमआईएमई टाइप के संसाधन दिखाए जाते हैं. DevTools, अपने-आप पूरा होने वाले ड्रॉप-डाउन में उन सभी एमआईएमई टाइप को भरता है जो उसे मिले हैं.
• mixed-content. सभी मिक्स किए गए कॉन्टेंट के संसाधन (mixed-content:all) या सिर्फ़ वे संसाधन दिखाएं जो दिखाए गए हैं (mixed-content:displayed).
• priority. ऐसे संसाधन दिखाएं जिनका प्राथमिकता लेवल, तय की गई वैल्यू से मैच करता हो.
• resource-type. किसी संसाधन टाइप के संसाधन दिखाएं. उदाहरण के लिए, इमेज. DevTools, अपने-आप पूरा होने वाले ड्रॉप-डाउन में, सभी तरह के संसाधन भरता है.
• response-header-set-cookie. 'समस्याएं' टैब में, Set-Cookie हेडर का रॉ डेटा दिखाएं. गलत तरीके से बनाई गई कुकी और गलत Set-Cookie हेडर को नेटवर्क पैनल में फ़्लैग किया जाएगा.
• scheme. असुरक्षित एचटीटीपी (scheme:http) या सुरक्षित एचटीटीपीएस (scheme:https) पर वापस लाए गए संसाधन दिखाएं.
• set-cookie-domain. ऐसे संसाधन दिखाएं जिनमें Set-Cookie हेडर के साथ Domain एट्रिब्यूट मौजूद हो और उसकी वैल्यू, बताई गई वैल्यू से मेल खाती हो. DevTools, अपने-आप पूरा होने की सुविधा को उन सभी कुकी डोमेन से भर देता है जिनका उसने सामना किया है.
• set-cookie-name. उन संसाधनों को दिखाएं जिनमें Set-Cookie हेडर मौजूद है और उसका नाम, दी गई वैल्यू से मेल खाता है. DevTools, ऑटोकंप्लीट की सुविधा में उन सभी कुकी के नाम भरता है जो उसे मिले हैं.
• set-cookie-value. उन संसाधनों को दिखाएं जिनमें Set-Cookie हेडर की वैल्यू, बताई गई वैल्यू से मेल खाती है. DevTools, ऑटोकंप्लीट की सुविधा को उन सभी कुकी वैल्यू से भर देता है जो उसे मिली हैं.
• status-code. सिर्फ़ उन संसाधनों को दिखाएं जिनका एचटीटीपी स्टेटस कोड, तय किए गए कोड से मेल खाता है. DevTools, ऑटोकंप्लीट ड्रॉप-डाउन मेन्यू में उन सभी स्टेटस कोड को भरता है जिनका उसे सामना करना पड़ा है.
• url. उन संसाधनों को दिखाएं जिनमें url की वैल्यू, बताई गई वैल्यू से मेल खाती है.

अनुरोधों को उनके टाइप के हिसाब से फ़िल्टर करना

संसाधन के टाइप के हिसाब से अनुरोधों को फ़िल्टर करने के लिए, नेटवर्क पैनल पर मौजूद इन बटन पर क्लिक करें: सभी, फ़ेच/XHR, JS, CSS, इमेज, मीडिया, फ़ॉन्ट, दस्तावेज़, WS (WebSocket), Wasm (WebAssembly), मेनिफ़ेस्ट या अन्य (यहां मौजूद नहीं, कोई अन्य टाइप).

अगर आपको ये बटन नहीं दिखते हैं, तो हो सकता है कि फ़िल्टर ऐक्शन बार छिपा हो. फ़िल्टर बार छिपाना लेख पढ़ें.

एक साथ कई तरह के संसाधन दिखाने के लिए, Command (Mac) या Control (Windows, Linux) को दबाकर रखें. इसके बाद, अलग-अलग टाइप के फ़िल्टर पर क्लिक करें.

समय के हिसाब से अनुरोधों को फ़िल्टर करना

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

डेटा यूआरएल छिपाएं

डेटा यूआरएल, छोटी फ़ाइलें होती हैं. इन्हें अन्य दस्तावेज़ों में एम्बेड किया जाता है. अनुरोध टेबल में, data: से शुरू होने वाला कोई भी अनुरोध, डेटा यूआरएल होता है.

इन अनुरोधों को छिपाने के लिए, फ़िल्टर कार्रवाई बार में जाकर, ज़्यादा फ़िल्टर > check_box डेटा यूआरएल छिपाएं को चुनें.

सबसे नीचे मौजूद स्टेटस बार में, कुल अनुरोधों में से दिखाए गए अनुरोधों की संख्या दिखती है.

एक्सटेंशन के यूआरएल छिपाएं

अपने कोड पर फ़ोकस करने के लिए, Chrome में इंस्टॉल किए गए एक्सटेंशन से भेजे गए ऐसे अनुरोधों को फ़िल्टर किया जा सकता है जो काम के नहीं हैं. एक्सटेंशन के अनुरोधों में ऐसे यूआरएल होते हैं जो chrome-extension:// से शुरू होते हैं.

एक्सटेंशन के अनुरोधों को छिपाने के लिए, फ़िल्टर ऐक्शन बार में जाकर, ज़्यादा फ़िल्टर > check_box एक्सटेंशन के यूआरएल छिपाएं को चुनें.

सबसे नीचे मौजूद स्टेटस बार में, कुल अनुरोधों में से दिखाए गए अनुरोधों की संख्या दिखती है.

सिर्फ़ ब्लॉक की गई रिस्पॉन्स कुकी वाले अनुरोध दिखाएं

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

सबसे नीचे मौजूद स्टेटस बार में, कुल अनुरोधों में से दिखाए गए अनुरोधों की संख्या दिखती है.

जवाब देने वाली कुकी को ब्लॉक करने की वजह जानने के लिए, अनुरोध चुनें. इसके बाद, उसका कुकी टैब खोलें और जानकारी वाले आइकॉन पर कर्सर घुमाएं.

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

सिर्फ़ ब्लॉक किए गए अनुरोध दिखाएं

ब्लॉक किए गए अनुरोधों के अलावा, बाकी सभी अनुरोधों को फ़िल्टर करने के लिए, फ़िल्टर ऐक्शन बार में, ज़्यादा फ़िल्टर > check_box ब्लॉक किए गए अनुरोध को चुनें. इसकी जांच करने के लिए, ड्रॉअर में मौजूद नेटवर्क के अनुरोध को ब्लॉक करने वाला टैब इस्तेमाल किया जा सकता है.

अनुरोध टेबल में, ब्लॉक किए गए अनुरोधों को लाल रंग में हाइलाइट किया जाता है. सबसे नीचे मौजूद स्टेटस बार में, कुल अनुरोधों में से दिखाए गए अनुरोधों की संख्या दिखती है.

सिर्फ़ तीसरे पक्ष के अनुरोध दिखाएं

पेज के ऑरिजिन से अलग ऑरिजिन वाले अनुरोधों को छोड़कर, बाकी सभी अनुरोधों को फ़िल्टर करने के लिए, फ़िल्टर कार्रवाई बार में जाकर, ज़्यादा फ़िल्टर > check_box तीसरे पक्ष के अनुरोध चुनें.

सबसे नीचे मौजूद स्टेटस बार में, कुल अनुरोधों में से दिखाए गए अनुरोधों की संख्या दिखती है.

अनुरोधों को क्रम से लगाना

डिफ़ॉल्ट रूप से, अनुरोध टेबल में अनुरोधों को शुरू होने के समय के हिसाब से क्रम में लगाया जाता है. हालांकि, टेबल को अन्य शर्तों के हिसाब से भी क्रम में लगाया जा सकता है.

कॉलम के हिसाब से क्रम में लगाना

अनुरोध टेबल में मौजूद किसी भी कॉलम के हेडर पर क्लिक करके, अनुरोधों को उस कॉलम के हिसाब से क्रम से लगाएं.

गतिविधि के फ़ेज़ के हिसाब से क्रम से लगाएं

वॉटरफ़ॉल, अनुरोधों को किस तरह क्रम से लगाए, यह बदलने के लिए अनुरोध टेबल के हेडर पर राइट क्लिक करें. इसके बाद, वॉटरफ़ॉल पर कर्सर घुमाएं और इनमें से कोई एक विकल्प चुनें:

• शुरू होने का समय. सबसे पहले किया गया अनुरोध, सबसे ऊपर दिखता है.
• जवाब देने में लगने वाला समय. सबसे पहले डाउनलोड किया गया अनुरोध, सबसे ऊपर दिखता है.
• खत्म होने का समय. सबसे ऊपर, वह अनुरोध दिखता है जो सबसे पहले पूरा हुआ.
• कुल अवधि. सबसे कम कनेक्शन सेटअप और अनुरोध / जवाब वाला अनुरोध सबसे ऊपर होता है.
• लेटेंसी. जिस अनुरोध के जवाब के लिए सबसे कम इंतज़ार करना पड़ा वह सबसे ऊपर है.

इन ब्यौरों में यह माना गया है कि हर विकल्प को सबसे छोटे से लेकर सबसे लंबे समय तक के हिसाब से रैंक किया गया है. वॉटरफ़ॉल कॉलम के हेडर पर क्लिक करने से, क्रम उलट जाता है.

इस उदाहरण में, वॉटरफ़ॉल को कुल अवधि के हिसाब से क्रम से लगाया गया है. हर बार का हल्का हिस्सा, इंतज़ार में बिताया गया समय दिखाता है. गहरे रंग वाला हिस्सा, बाइट डाउनलोड करने में लगने वाले समय को दिखाता है.

अनुरोधों का विश्लेषण करना

जब तक DevTools खुला रहता है, तब तक यह नेटवर्क पैनल में सभी अनुरोधों को लॉग करता है. अनुरोधों का विश्लेषण करने के लिए, नेटवर्क पैनल का इस्तेमाल करें.

अनुरोधों का लॉग देखना

DevTools खुले होने के दौरान किए गए सभी अनुरोधों का लॉग देखने के लिए, अनुरोध टेबल का इस्तेमाल करें. अनुरोधों पर क्लिक करने या कर्सर घुमाने से, उनके बारे में ज़्यादा जानकारी मिलती है.

अनुरोध टेबल में, डिफ़ॉल्ट रूप से ये कॉलम दिखते हैं:

• नाम. संसाधन का फ़ाइल नाम या आइडेंटिफ़ायर.

• स्टेटस. इस कॉलम में ये वैल्यू दिख सकती हैं:

  

  • एचटीटीपी स्टेटस कोड, जैसे कि 200 या 404.
  • CORS error क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) की वजह से अनुरोध पूरे नहीं किए जा सके.
  • गलत तरीके से कॉन्फ़िगर किए गए हेडर वाले अनुरोधों के लिए (blocked:origin). इस स्टेटस वैल्यू पर कर्सर घुमाएं. इससे आपको एक टूलटिप दिखेगी, जिसमें गड़बड़ी के बारे में जानकारी होगी.
  • (failed) के बाद गड़बड़ी का मैसेज.

• टाइप. अनुरोध किए गए संसाधन का एमआईएमई टाइप.

• शुरुआत करने वाला. ये ऑब्जेक्ट या प्रोसेस, अनुरोध शुरू कर सकते हैं:

  • पार्सर. Chrome का एचटीएमएल पार्सर.
  • रीडायरेक्ट. एचटीटीपी रीडायरेक्ट.
  • स्क्रिप्ट. JavaScript फ़ंक्शन. इस मामले में, नेटवर्क पैनल, सोर्स फ़ाइल में मौजूद लाइन का लिंक देता है.
  • अर्ली हिंट. एचटीटीपी 103 Early Hints रिस्पॉन्स.
  • अन्य. कोई अन्य प्रोसेस या कार्रवाई, जैसे कि किसी लिंक का इस्तेमाल करके किसी पेज पर जाना या पता बार में यूआरएल डालना.

• साइज़. रिस्पॉन्स हेडर और रिस्पॉन्स बॉडी का कुल साइज़, जैसा कि सर्वर ने डिलीवर किया है.

• समय. अनुरोध की शुरुआत से लेकर जवाब में आखिरी बाइट मिलने तक का कुल समय.

• वॉटरफ़ॉल. हर अनुरोध की गतिविधि की विज़ुअल जानकारी.

कॉलम जोड़ें या निकालें

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

इन अतिरिक्त कॉलम को जोड़ा या हटाया जा सकता है:

• अनुरोध #. अनुरोध शुरू करने का सटीक क्रम. यह डिफ़ॉल्ट रूप से, अनुरोध टेबल में पहली पोज़िशन पर पिन किया जाता है.
• पाथ. यूआरएल का पाथ वाला हिस्सा.
• यूआरएल. अनुरोध का पूरा यूआरएल.
• तरीका. अनुरोध का एचटीटीपी तरीका (उदाहरण के लिए, GET, POST, PUT, DELETE).
• प्रोटोकॉल. अनुरोध का प्रोटोकॉल. उदाहरण के लिए, एचटीटीपी/2 के लिए h2, एचटीटीपी/3 के लिए h3 वगैरह.
• स्कीम. यूआरएल का स्कीम वाला हिस्सा.
• डोमेन. यूआरएल का डोमेन वाला हिस्सा.
• रिमोट पता. अनुरोध का रिमोट आईपी पता और पोर्ट.
• रिमोट एड्रेस स्पेस. अनुरोध का रिमोट एड्रेस स्पेस. सार्वजनिक आईपी के लिए Public, निजी आईपी के लिए Private.
• इनिशिएटर एड्रेस स्पेस. अनुरोध का इनिशिएटर एड्रेस स्पेस. रिमोट की तरह.
• कुकी. अनुरोध में मौजूद कुकी की संख्या.
• कुकी सेट करें. रिस्पॉन्स में मौजूद कुकी की संख्या.
• प्राथमिकता. अनुरोध की प्राथमिकता.
• कनेक्शन आईडी. क्लाइंट सेशन में अनुरोध का कनेक्शन आईडी. अगर कोई कनेक्शन आईडी नहीं है, तो यह फ़ील्ड मौजूद नहीं होता.
• इसमें बदलाव किए गए हैं. अनुरोध में बदलाव किए गए हैं या नहीं (हां, नहीं, कॉन्टेंट या हेडर).
• यह अनुरोध विज्ञापन से जुड़ा है. सही या गलत.
• पहले से लोड किया गया. क्या अनुरोध, अनुमान के हिसाब से पहले से लोड करने की सुविधा का इस्तेमाल करके शुरू किया गया था.
• रेंडर होने से रोकना. अनुरोध, रेंडर होने से रोकने वाला है, संभावित रूप से ब्लॉक करने वाला है या नहीं.
• वॉटरफ़ॉल. हर अनुरोध की गतिविधि की विज़ुअल जानकारी.

कस्टम कॉलम जोड़ना

अनुरोध टेबल में कस्टम कॉलम जोड़ने के लिए:

1. Requests टेबल के हेडर पर राइट क्लिक करें और रिस्पॉन्स हेडर > Manage Header Columns चुनें.
2. डायलॉग विंडो में, कस्टम हेडर जोड़ें पर क्लिक करें. इसके बाद, उसका नाम डालें और जोड़ें पर क्लिक करें.

इनलाइन फ़्रेम के हिसाब से ग्रुप किए गए अनुरोध

अगर किसी पेज पर मौजूद इनलाइन फ़्रेम से बहुत सारे अनुरोध किए जाते हैं, तो उन्हें ग्रुप करके अनुरोध लॉग को ज़्यादा आसानी से समझा जा सकता है.

अनुरोधों को iframe के हिसाब से ग्रुप करने के लिए, नेटवर्क पैनल में जाकर सेटिंग खोलें. इसके बाद, check_box फ़्रेम के हिसाब से ग्रुप करें को चुनें.

इनलाइन फ़्रेम से किए गए अनुरोध को देखने के लिए, अनुरोध लॉग में उसे बड़ा करें.

अनुरोधों के समय की तुलना करना

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

वॉटरफ़ॉल को क्रम से लगाने के अलग-अलग तरीकों के बारे में जानने के लिए, गतिविधि के फ़ेज़ के हिसाब से क्रम से लगाएं लेख पढ़ें.

WebSocket कनेक्शन के मैसेज का विश्लेषण करना

WebSocket कनेक्शन के मैसेज देखने के लिए:

1. अनुरोध टेबल के नाम कॉलम में, WebSocket कनेक्शन के यूआरएल पर क्लिक करें.
2. Messages टैब खोलें. टेबल में आखिरी 100 मैसेज दिखते हैं.

टेबल को रीफ़्रेश करने के लिए, अनुरोध टेबल के नाम कॉलम में जाकर, WebSocket कनेक्शन के नाम पर फिर से क्लिक करें.

टेबल में तीन कॉलम होते हैं:

• डेटा. मैसेज का पेलोड. अगर मैसेज सादे टेक्स्ट में है, तो वह यहां दिखता है. बाइनरी ऑपकोड के लिए, इस कॉलम में ऑपकोड का नाम और कोड दिखता है. इन ओपकोड का इस्तेमाल किया जा सकता है: कंटिन्यूएशन फ़्रेम, बाइनरी फ़्रेम, कनेक्शन क्लोज़ फ़्रेम, पिंग फ़्रेम, और पोंग फ़्रेम.
• अवधि. मैसेज पेलोड की लंबाई, बाइट में.
• समय. वह समय जब मैसेज मिला या भेजा गया था.

मैसेज को उनके टाइप के हिसाब से रंग-कोड किया जाता है:

• भेजे गए मैसेज हल्के हरे रंग के होते हैं.
• आने वाले मैसेज सफ़ेद रंग के होते हैं.
• WebSocket के ऑपकोड हल्के पीले रंग के होते हैं.
• गड़बड़ियां हल्के लाल रंग में दिखती हैं.

किसी स्ट्रीम में इवेंट का विश्लेषण करना

Fetch API, EventSource API, और XHR के ज़रिए सर्वर से स्ट्रीम किए जाने वाले इवेंट देखने के लिए:

1. इवेंट स्ट्रीम करने वाले पेज पर, नेटवर्क अनुरोध रिकॉर्ड करें.
2. नेटवर्क में, कोई अनुरोध चुनें और EventStream टैब खोलें.

इवेंट फ़िल्टर करने के लिए, EventStream टैब में सबसे ऊपर मौजूद फ़िल्टर बार में रेगुलर एक्सप्रेशन डालें.

कैप्चर किए गए इवेंट की सूची मिटाने के लिए, block मिटाएं पर क्लिक करें.

जवाब के मुख्य हिस्से की झलक देखना

जवाब के मुख्य हिस्से की झलक देखने के लिए:

1. अनुरोध टेबल में, नाम कॉलम में जाकर कोई अनुरोध चुनें.
2. झलक टैब खोलें.

यह टैब, इमेज देखने के लिए सबसे ज़्यादा काम का है.

जवाब की मुख्य जानकारी देखना

किसी अनुरोध के रिस्पॉन्स की बॉडी देखने के लिए:

1. अनुरोध टेबल में, नाम कॉलम में जाकर कोई अनुरोध चुनें.
2. जवाब टैब खोलें.

बाइनरी या कंप्रेस किए गए रिस्पॉन्स के लिए, रिस्पॉन्स टैब में सबसे नीचे मौजूद ड्रॉप-डाउन मेन्यू से, डिकोड करने का कोई तरीका (Base64, Hex या UTF-8) चुनें.

एचटीटीपी हेडर देखना

किसी अनुरोध का एचटीटीपी हेडर डेटा देखने के लिए:

1. अनुरोध टेबल में, नाम कॉलम में जाकर कोई अनुरोध चुनें.
2. Headers टैब खोलें और नीचे की ओर स्क्रोल करके, General, Response Headers, Request Headers, और ज़रूरत पड़ने पर Early Hints Headers सेक्शन पर जाएं.

सामान्य सेक्शन में, DevTools आपको मिले एचटीटीपी स्टेटस कोड के बगल में, ऐसा स्टेटस मैसेज दिखाता है जिसे आसानी से समझा जा सकता है.

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

एचटीटीपी हेडर का सोर्स देखना

डिफ़ॉल्ट रूप से, हेडर टैब में हेडर के नाम वर्णमाला के क्रम में दिखते हैं. एचटीटीपी हेडर के नामों को उनके मिलने के क्रम में देखने के लिए:

1. उस अनुरोध के लिए हेडर टैब खोलें जिसमें आपकी दिलचस्पी है. एचटीटीपी हेडर देखें.
2. अनुरोध का हेडर या रिस्पॉन्स हेडर सेक्शन के बगल में मौजूद, सोर्स देखें पर क्लिक करें.

प्रोविज़नल हेडर की चेतावनी

कभी-कभी हेडर टैब में, Provisional headers are shown... चेतावनी वाला मैसेज दिखता है. ऐसा नीचे बताए गए कारणों की वजह से हो सकता है:

• अनुरोध, नेटवर्क पर नहीं भेजा गया था. इसके बजाय, इसे किसी स्थानीय कैश मेमोरी से दिखाया गया था, जिसमें अनुरोध के मूल हेडर सेव नहीं किए जाते. इस मामले में, अनुरोध के सभी हेडर देखने के लिए, कैश मेमोरी को बंद किया जा सकता है.

• नेटवर्क रिसॉर्स मान्य नहीं है. उदाहरण के लिए, कंसोल में fetch("https://jec.fish.com/unknown-url/") को लागू करें.

सुरक्षा से जुड़ी वजहों से, DevTools सिर्फ़ प्रोविज़नल हेडर भी दिखा सकता है.

अनुरोध का पेलोड देखें

अनुरोध का पेलोड देखने के लिए, यानी कि उसके क्वेरी स्ट्रिंग पैरामीटर और फ़ॉर्म डेटा देखने के लिए, अनुरोध टेबल से कोई अनुरोध चुनें. इसके बाद, पेलोड टैब खोलें.

पेलोड सोर्स देखें

डिफ़ॉल्ट रूप से, DevTools पेलोड को किसी व्यक्ति के लिए आसानी से पढ़ा जा सकने वाला डेटा फ़ॉर्मैट में दिखाता है.

क्वेरी स्ट्रिंग पैरामीटर और फ़ॉर्म डेटा के सोर्स देखने के लिए, पेलोड टैब पर जाएं. इसके बाद, क्वेरी स्ट्रिंग पैरामीटर या फ़ॉर्म डेटा सेक्शन के बगल में मौजूद, सोर्स देखें पर क्लिक करें.

कोड में बदले गए यूआरएल की क्वेरी और फ़ॉर्म पैरामीटर देखना

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

बाइनरी और कंप्रेस किए गए पेलोड देखना

बाइनरी या कंप्रेस किए गए अनुरोध के पेलोड के लिए, पेलोड टैब में सबसे नीचे मौजूद ड्रॉप-डाउन मेन्यू से, डिकोडिंग का कोई तरीका (Base64, Hex या UTF-8) चुनें.

कुकी देखना

अनुरोध के एचटीटीपी हेडर में भेजी गई कुकी देखने के लिए:

1. अनुरोध टेबल में, नाम कॉलम में जाकर कोई अनुरोध चुनें.
2. कुकी टैब खोलें.

हर कॉलम की जानकारी के लिए, फ़ील्ड देखें.

कुकी में बदलाव करने के लिए, कुकी देखना, उनमें बदलाव करना, और उन्हें मिटाना लेख पढ़ें.

डिवाइस से जुड़े सेशन देखना

डिवाइस बाइंडिंग सेशन टैब में, किसी साइट पर डिवाइस बाइंडिंग सेशन के लिए चुने गए अनुरोध से जुड़ी, पुष्टि में देरी (रीफ़्रेश) की जानकारी दिखती है.

रीफ़्रेश होने में लगने वाले समय की जानकारी देखने के लिए:

1. अनुरोध टेबल में, नाम कॉलम में जाकर कोई अनुरोध चुनें.
2. डिवाइस से जुड़े सेशन टैब खोलें.

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

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

अनुरोध के समय का ब्रेकडाउन देखना

किसी अनुरोध के समय का ब्रेकडाउन देखने के लिए:

1. अनुरोध टेबल में, नाम कॉलम में जाकर कोई अनुरोध चुनें.
2. समय टैब खोलें.

इस डेटा को तेज़ी से ऐक्सेस करने के लिए, टाइमिंग के हिसाब से डेटा का पूर्वावलोकन करना लेख पढ़ें.

समय टैब में दिखने वाले हर फ़ेज़ के बारे में ज़्यादा जानने के लिए, समय के ब्रेकडाउन के फ़ेज़ के बारे में जानकारी देखें.

समय के ब्रेकडाउन की झलक देखना

अनुरोध के समय के ब्रेकडाउन की झलक देखने के लिए, अनुरोध टेबल के वॉटरफ़ॉल कॉलम में अनुरोध की एंट्री पर कर्सर घुमाएं.

इस डेटा को ऐक्सेस करने का ऐसा तरीका जानने के लिए जिसमें कर्सर को घुमाने की ज़रूरत नहीं पड़ती, किसी अनुरोध के समय का ब्रेकडाउन देखें पर जाएं.

टाइमिंग ब्रेकडाउन फ़ेज़ के बारे में जानकारी

समय टैब में दिखने वाले हर चरण के बारे में ज़्यादा जानकारी यहां दी गई है:

• कतार में जोड़ना. कनेक्शन शुरू होने से पहले, ब्राउज़र अनुरोधों को कतार में लगाता है. ऐसा तब होता है, जब:
  • ज़्यादा प्राथमिकता वाले अनुरोध मौजूद हैं. अनुरोध की प्राथमिकता कई बातों से तय होती है. जैसे, संसाधन का टाइप और दस्तावेज़ में उसकी जगह. ज़्यादा जानकारी के लिए, fetchpriority गाइड में संसाधन की प्राथमिकता वाला सेक्शन पढ़ें.
  • इस ऑरिजिन के लिए, पहले से ही छह टीसीपी कनेक्शन खुले हैं. यह सीमा है. (यह सिर्फ़ एचटीटीपी/1.0 और एचटीटीपी/1.1 पर लागू होता है.)
  • ब्राउज़र, डिस्क की कैश मेमोरी में कुछ समय के लिए जगह असाइन कर रहा है.
• Stalled. कनेक्शन शुरू होने के बाद, सूची में शामिल करने की वजहों से अनुरोध रुक सकता है.
• डीएनएस लुकअप. ब्राउज़र, अनुरोध के आईपी पते को रिज़ॉल्व कर रहा है.
• शुरुआती कनेक्शन. ब्राउज़र, कनेक्शन बना रहा है. इसमें टीसीपी हैंडशेक या फिर से कोशिश करना और एसएसएल पर बातचीत करना शामिल है.
• प्रॉक्सी नेगोशिएशन. ब्राउज़र, प्रॉक्सी सर्वर के साथ अनुरोध को सेट अप कर रहा है.
• अनुरोध भेजा गया. अनुरोध भेजा जा रहा है.
• ServiceWorker की तैयारी. ब्राउज़र, सर्विस वर्कर को शुरू कर रहा है.
• ServiceWorker को अनुरोध. अनुरोध को सर्विस वर्कर को भेजा जा रहा है.
• इंतज़ार किया जा रहा है (टीटीएफ़बी). ब्राउज़र, रिस्पॉन्स के पहले बाइट का इंतज़ार कर रहा है. टीटीएफ़बी का मतलब है, टाइम टू फ़र्स्ट बाइट. इस समय में, लेटेन्सी का एक राउंड ट्रिप और सर्वर को जवाब तैयार करने में लगा समय शामिल होता है.
• कॉन्टेंट डाउनलोड करें. ब्राउज़र को रिस्पॉन्स मिल रहा है. यह रिस्पॉन्स, सीधे नेटवर्क या किसी सर्विस वर्कर से मिल रहा है. यह वैल्यू, रिस्पॉन्स बॉडी को पढ़ने में लगने वाले कुल समय को दिखाती है. उम्मीद से ज़्यादा वैल्यू होने का मतलब है कि नेटवर्क धीमा है या ब्राउज़र किसी दूसरे काम में व्यस्त है. इस वजह से, रिस्पॉन्स को पढ़ने में देरी हो रही है.

शुरू करने वाले और डिपेंडेंसी देखना

किसी अनुरोध को शुरू करने वाले और उस पर निर्भर अनुरोधों को देखने के लिए, Shift दबाकर रखें. इसके बाद, अनुरोधों की टेबल में मौजूद अनुरोध पर कर्सर घुमाएं. DevTools, इनिशिएटर को हरे रंग में और डिपेंडेंसी को लाल रंग में दिखाता है.

जब अनुरोध टेबल को समय के हिसाब से क्रम में लगाया जाता है, तो जिस अनुरोध पर कर्सर घुमाया जा रहा है उसके ऊपर मौजूद हरे रंग का पहला अनुरोध, डिपेंडेंसी को शुरू करने वाला होता है. अगर इसके ऊपर हरे रंग का कोई और अनुरोध है, तो वह अनुरोध, अनुरोध शुरू करने वाले का भी अनुरोध शुरू करने वाला है. और ऐसे ही अन्य कार्य.

लोड इवेंट देखना

DevTools, नेटवर्क पैनल पर कई जगहों पर DOMContentLoaded और load इवेंट का समय दिखाता है. DOMContentLoaded इवेंट का रंग नीला है और load इवेंट का रंग लाल है.

अनुरोधों की कुल संख्या देखना

अनुरोधों की कुल संख्या, नेटवर्क पैनल में सबसे नीचे स्टेटस बार में दिखती है.

ट्रांसफ़र और लोड किए गए रिसॉर्स का कुल साइज़ देखना

DevTools, नेटवर्क पैनल में सबसे नीचे मौजूद स्टेटस बार में, ट्रांसफ़र और लोड किए गए (कंप्रेस नहीं किए गए) रिसॉर्स का कुल साइज़ दिखाता है.

किसी रिसॉर्स का अनकंप्रेस किया गया साइज़ देखें पर जाकर देखें कि ब्राउज़र के अनकंप्रेस करने के बाद, रिसॉर्स कितने बड़े हैं.

उस स्टैक ट्रेस को देखना जिसकी वजह से अनुरोध किया गया था

जब कोई JavaScript स्टेटमेंट, किसी संसाधन का अनुरोध करता है, तो अनुरोध से पहले के स्टैक ट्रेस को देखने के लिए, शुरुआत करने वाला कॉलम पर कर्सर घुमाएं.

किसी रिसोर्स का अनकंप्रेस्ड साइज़ देखना

सेटिंग > Big request rows को चुनें. इसके बाद, साइज़ कॉलम में सबसे नीचे मौजूद वैल्यू देखें.

इस उदाहरण में, नेटवर्क पर भेजे गए www.google.com दस्तावेज़ का कंप्रेस किया गया साइज़ 43.8 KB था, जबकि कंप्रेस नहीं किया गया साइज़ 136 KB था.

डेटा एक्सपोर्ट करने के अनुरोधों का डेटा

फ़िल्टर लागू करके, अनुरोधों की सूची को एक्सपोर्ट या कॉपी किया जा सकता है. इसके लिए, यहां बताए गए कई तरीके अपनाए जा सकते हैं.

सभी नेटवर्क अनुरोधों को HAR फ़ाइल में सेव करना

HAR (एचटीटीपी संग्रह) एक फ़ाइल फ़ॉर्मैट है. इसका इस्तेमाल कई एचटीटीपी सेशन टूल, कैप्चर किए गए डेटा को एक्सपोर्ट करने के लिए करते हैं. यह फ़ॉर्मैट, फ़ील्ड के किसी खास सेट के साथ JSON ऑब्जेक्ट होता है.

संवेदनशील जानकारी के गलती से लीक होने की संभावना को कम करने के लिए, डिफ़ॉल्ट रूप से "साफ़" किए गए नेटवर्क लॉग को HAR फ़ॉर्मैट में एक्सपोर्ट किया जा सकता है. इसमें Cookie, Set-Cookie, और Authorization हेडर जैसी संवेदनशील जानकारी शामिल नहीं होती. ज़रूरत पड़ने पर, संवेदनशील डेटा के साथ लॉग को भी एक्सपोर्ट किया जा सकता है.

सभी नेटवर्क अनुरोधों को HAR फ़ाइल में सेव करने के लिए, इनमें से कोई एक तरीका चुनें:

• अनुरोध टेबल में मौजूद किसी भी अनुरोध पर राइट क्लिक करें. इसके बाद, कॉपी करें > [सूची में शामिल] सभी को HAR (साफ़ किया गया) के तौर पर सेव करें या [सूची में शामिल] सभी को HAR (संवेदनशील डेटा के साथ) के तौर पर सेव करें को चुनें.

  

• नेटवर्क पैनल में सबसे ऊपर मौजूद कार्रवाई बार में, डाउनलोड करें HAR फ़ाइल एक्सपोर्ट करें (सेंसिटिव डेटा हटाकर)... पर क्लिक करें.

  संवेदनशील डेटा के साथ एक्सपोर्ट करने के लिए, सबसे पहले सेटिंग सेटिंग > प्राथमिकताएं > नेटवर्क > check_box संवेदनशील डेटा के साथ HAR जनरेट करने की अनुमति दें को चालू करें. इसके बाद, download एक्सपोर्ट करें बटन पर क्लिक करें और ड्रॉप-डाउन मेन्यू से HAR (संवेदनशील डेटा के साथ) एक्सपोर्ट करें को चुनें.

  

HAR फ़ाइल मिलने के बाद, उसे DevTools में वापस इंपोर्ट किया जा सकता है. ऐसा दो तरीकों से किया जा सकता है, ताकि विश्लेषण किया जा सके:

• HAR फ़ाइल को खींचकर, अनुरोध टेबल में छोड़ें.
• Network पैनल में सबसे ऊपर मौजूद कार्रवाई बार में, upload Import HAR पर क्लिक करें.

किसी अनुरोध, अनुरोधों के फ़िल्टर किए गए सेट या सभी अनुरोधों को क्लिपबोर्ड पर कॉपी करना

अनुरोध टेबल के नाम कॉलम में, किसी अनुरोध पर राइट क्लिक करें. इसके बाद, कॉपी करें पर कर्सर घुमाएं और इनमें से कोई एक विकल्प चुनें.

किसी एक अनुरोध, उसके जवाब या स्टैक ट्रेस को कॉपी करने के लिए:

• यूआरएल कॉपी करें. अनुरोध के यूआरएल को क्लिपबोर्ड पर कॉपी करें.
• cURL के तौर पर कॉपी करें. अनुरोध को cURL कमांड के तौर पर कॉपी करें.
• PowerShell के तौर पर कॉपी करें. अनुरोध को PowerShell कमांड के तौर पर कॉपी करें.
• फ़ेच के तौर पर कॉपी करें. अनुरोध को फ़ेच कॉल के तौर पर कॉपी करें.
• fetch (Node.js) के तौर पर कॉपी करें. अनुरोध को Node.js फ़ेच कॉल के तौर पर कॉपी करें.
• प्रीलोड एलिमेंट के तौर पर कॉपी करें. अनुरोध को <link rel="preload"> एचटीएमएल टैग के तौर पर कॉपी करें.
• जवाब कॉपी करें पर क्लिक करें. जवाब के मुख्य हिस्से को क्लिपबोर्ड पर कॉपी करें.
• स्टैक ट्रेस कॉपी करें. अनुरोध के स्टैक ट्रैक को क्लिपबोर्ड पर कॉपी करें.

सभी अनुरोधों को कॉपी करने के लिए:

• सभी यूआरएल कॉपी करें. इससे सभी अनुरोधों के यूआरएल को क्लिपबोर्ड पर कॉपी किया जा सकता है.
• सभी को cURL के तौर पर कॉपी करें. सभी अनुरोधों को cURL कमांड की चेन के तौर पर कॉपी करें.
• सभी को PowerShell के तौर पर कॉपी करें. सभी अनुरोधों को PowerShell कमांड की चेन के तौर पर कॉपी करें.
• सभी को फ़ेच के तौर पर कॉपी करें. सभी अनुरोधों को फ़ेच कॉल की चेन के तौर पर कॉपी करें.
• Copy all as fetch (Node.js). सभी अनुरोधों को Node.js फ़ेच कॉल की चेन के तौर पर कॉपी करें.
• पूरा डेटा HAR (संवेदनशील डेटा हटाकर) फ़ाइल फ़ॉर्मैट में कॉपी करें. सभी अनुरोधों को एचएआर डेटा के तौर पर कॉपी करें. इसमें Cookie, Set-Cookie, और Authorization हेडर जैसा संवेदनशील डेटा शामिल न करें.
• पूरा डेटा HAR फ़ाइल फ़ॉर्मैट में कॉपी करें और इसमें संवेदनशील डेटा भी शामिल करें. सभी अनुरोधों को संवेदनशील डेटा के साथ HAR डेटा के तौर पर कॉपी करें.

अनुरोधों के फ़िल्टर किए गए सेट को कॉपी करने के लिए, नेटवर्क लॉग पर कोई फ़िल्टर लागू करें. इसके बाद, किसी अनुरोध पर राइट क्लिक करें और इनमें से कोई विकल्प चुनें:

• सूची में दिए गए सभी यूआरएल कॉपी करें. फ़िल्टर किए गए सभी अनुरोधों के यूआरएल को क्लिपबोर्ड पर कॉपी करें.
• Copy all listed as cURL. फ़िल्टर किए गए सभी अनुरोधों को cURL कमांड की चेन के तौर पर कॉपी करें.
• Copy all listed as PowerShell. फ़िल्टर किए गए सभी अनुरोधों को PowerShell कमांड की चेन के तौर पर कॉपी करें.
• फ़ेच किए गए सभी यूआरएल कॉपी करें. फ़िल्टर किए गए सभी अनुरोधों को फ़ेच कॉल की चेन के तौर पर कॉपी करें.
• सूची में दिए गए सभी निर्देशों को फ़ेच (Node.js) के तौर पर कॉपी करें. फ़िल्टर किए गए सभी अनुरोधों को Node.js फ़ेच कॉल की चेन के तौर पर कॉपी करें.
• HAR (संवेदनशील डेटा हटाकर) के तौर पर सूची में मौजूद सभी आइटम कॉपी करें. फ़िल्टर किए गए सभी अनुरोधों को HAR डेटा के तौर पर कॉपी करें. इसमें Cookie, Set-Cookie, और Authorization हेडर जैसे संवेदनशील डेटा शामिल नहीं होने चाहिए.
• Copy all listed as HAR (with sensitive data). फ़िल्टर किए गए सभी अनुरोधों को संवेदनशील डेटा के साथ HAR डेटा के तौर पर कॉपी करें.

नेटवर्क पैनल का लेआउट बदलना

नेटवर्क पैनल के यूज़र इंटरफ़ेस (यूआई) के सेक्शन को बड़ा या छोटा करें, ताकि आप अपनी ज़रूरत की चीज़ों पर फ़ोकस कर सकें.

फ़िल्टर ऐक्शन बार को छिपाना

डिफ़ॉल्ट रूप से, DevTools में नेटवर्क पैनल के सबसे ऊपर फ़िल्टर बार दिखता है. इसे छिपाने के लिए, filter_alt फ़िल्टर करें पर क्लिक करें.

बड़े अनुरोध वाली पंक्तियों का इस्तेमाल करना

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

सेटिंग खोलें और बड़ी लाइनें देखने के लिए, बड़ी अनुरोध लाइनें पर क्लिक करें.

खास जानकारी वाले ट्रैक को छिपाना

डिफ़ॉल्ट रूप से, DevTools में खास जानकारी ट्रैक दिखता है. सेटिंग खोलें और खास जानकारी दिखाएं चेकबॉक्स से सही का निशान हटाएं.