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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एक्सएचआर अनुरोध को फिर से चलाएं

XHR अनुरोध को फिर से चलाने के लिए, अनुरोध टेबल में इनमें से कोई एक काम करें:

• अनुरोध चुनें और R दबाएं.
• अनुरोध पर राइट क्लिक करें और Replay XHR को चुनें.

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

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

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

'नेटवर्क की स्थितियां' ड्रॉअर से ब्राउज़र की कैश मेमोरी सेव होने की सेटिंग बंद करना

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

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

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

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

ऑफ़लाइन मोड में काम करने की सुविधा को चालू करना

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

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

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

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

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

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

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

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

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

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

   

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

WebSocket कनेक्शन की संख्या कम करना

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

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

1. एक नया कनेक्शन शुरू करें. उदाहरण के लिए, टेस्ट टूल का इस्तेमाल करके.
2. नेटवर्क पैनल में जाकर, No throttling को चुनें. इसके बाद, कनेक्शन के ज़रिए कोई मैसेज भेजें.
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. खोज के किसी नतीजे पर क्लिक करें. नेटवर्क पैनल में, मैच होने वाले अनुरोध को पीले रंग में हाइलाइट किया जाता है. इसके अलावा, पैनल हेडर या जवाब टैब भी खोलता है. साथ ही, अगर कोई स्ट्रिंग मैच होती है, तो उसे हाइलाइट करता है.

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

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

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

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

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

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

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

एक साथ कई प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसके लिए, हर प्रॉपर्टी को स्पेस देकर अलग करें. उदाहरण के लिए, 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. इससे किसी MIME टाइप के संसाधन दिखाए जाते हैं. DevTools, ऑटोकंप्लीट ड्रॉप-डाउन में उन सभी MIME टाइप को भरता है जिनका उसे पता है.
• 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, Img, मीडिया, फ़ॉन्ट, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest या अन्य (यहां नहीं दिया गया कोई अन्य टाइप) बटन पर क्लिक करें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इस टैब का इस्तेमाल, मुख्य रूप से इमेज देखने के लिए किया जाता है.

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

अनुरोध के जवाब का मुख्य हिस्सा देखने के लिए:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पे लोड का सोर्स देखना

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

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

क्वेरी स्ट्रिंग पैरामीटर के डिकोड किए गए तर्क देखना

आर्ग्युमेंट के लिए यूआरएल-कोडिंग को टॉगल करने के लिए, पेलोड टैब में जाकर, डिकोड किया गया व्यू देखें या यूआरएल-कोड में बदला गया व्यू देखें पर क्लिक करें.

कुकी देखना

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

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, Network पैनल में सबसे नीचे मौजूद स्टेटस बार में, ट्रांसफ़र किए गए और लोड किए गए (अनकंप्रेस किए गए) संसाधनों का कुल साइज़ दिखाता है.

ब्राउज़र के कंप्रेस किए गए संसाधनों को अनकंप्रेस करने के बाद उनका साइज़ कितना होता है, यह देखने के लिए संसाधन के अनकंप्रेस किए गए साइज़ को देखना लेख पढ़ें.

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

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

किसी संसाधन का कंप्रेस नहीं किया गया साइज़ देखना

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

इस उदाहरण में, नेटवर्क पर भेजे गए 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 फ़ाइल को खींचकर, अनुरोध टेबल में छोड़ें.
• नेटवर्क पैनल में सबसे ऊपर मौजूद ऐक्शन बार में, अपलोड करें HAR इंपोर्ट करें पर क्लिक करें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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