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

Kayce Basques

Sofia Emelianova

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 खुला होने पर, यह Network पैनल में सभी अनुरोधों को लॉग करता है. अनुरोधों का विश्लेषण करने के लिए, नेटवर्क पैनल का इस्तेमाल करें.

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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 Preparation. ब्राउज़र, सर्विस वर्कर को शुरू कर रहा है.
• ServiceWorker को अनुरोध. अनुरोध को सर्विस वर्कर को भेजा जा रहा है.
• इंतज़ार किया जा रहा है (टीटीएफ़बी). ब्राउज़र, जवाब के पहले बाइट का इंतज़ार कर रहा है. टीटीएफ़बी का मतलब है टाइम टू फ़र्स्ट बाइट. इस समय में, लेटेन्सी का एक राउंड ट्रिप और सर्वर को जवाब तैयार करने में लगा समय शामिल होता है.
• कॉन्टेंट डाउनलोड करें. ब्राउज़र को जवाब मिल रहा है. यह जवाब, सीधे नेटवर्क से या सर्विस वर्कर से मिल रहा है. यह वैल्यू, जवाब के मुख्य हिस्से को पढ़ने में लगे कुल समय के बारे में बताती है. अनुमान से ज़्यादा बड़ी वैल्यू का मतलब यह हो सकता है कि नेटवर्क धीमा है या ब्राउज़र अन्य काम कर रहा है. इस वजह से, जवाब को पढ़ने में देरी हो रही है.

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

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

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

लोड होने से जुड़े इवेंट देखना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

• नेटवर्क पैनल में सबसे ऊपर मौजूद ऐक्शन बार में, डाउनलोड करें एक्सपोर्ट HAR (sanitized)... पर क्लिक करें.

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

  

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

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

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

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

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

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

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