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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

अनुरोध हटाएं

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

सभी पेज लोड में अनुरोध सेव करें

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

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

स्क्रीनशॉट कैप्चर करें, ताकि यह विश्लेषण किया जा सके कि आपके पेज के लोड होने का इंतज़ार करते समय लोगों को क्या दिखता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ऑफ़लाइन एम्युलेट करें

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

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

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

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

धीमे 3G, तेज़ 3G, और अन्य कनेक्शन की स्पीड को एम्युलेट करने के लिए, थरॉटलिंग मेन्यू में से जुड़े विकल्प चुनें.

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

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

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

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

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

   

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

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

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

WebSocket थ्रॉटलिंग का पता लगाने के लिए:

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

नेटवर्क की स्थिति दिखाने वाले पैनल से, धीमे इंटरनेट कनेक्शन को एम्युलेट करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

हर प्रॉपर्टी को स्पेस से अलग करके, एक साथ कई प्रॉपर्टी का इस्तेमाल किया जा सकता है. उदाहरण के लिए, 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 हेडर वाली खराब कुकी को नेटवर्क पैनल में फ़्लैग किया जाएगा.
• scheme. असुरक्षित एचटीटीपी (scheme:http) या सुरक्षित एचटीटीपीएस (scheme:https) पर वापस लाए गए संसाधन दिखाएं.
• set-cookie-domain. ऐसे रिसॉर्स दिखाएं जिनमें दी गई वैल्यू से मैच करने वाली Domain एट्रिब्यूट की वैल्यू के साथ, Set-Cookie हेडर है. DevTools उन सभी कुकी डोमेन की मदद से ऑटोकंप्लीट की सुविधा को पूरा करता है जिनका सामना यह हुआ है.
• set-cookie-name. Set-Cookie हेडर वाले संसाधनों को बताए गए नाम से मेल खाने वाले नाम के साथ दिखाएं. DevTools कुकी के उन सभी नामों को शामिल करता है जो ऑटोकंप्लीट किए गए हैं.
• set-cookie-value. Set-Cookie हेडर वाले उन संसाधनों को दिखाएं जिनकी वैल्यू तय की गई वैल्यू से मेल खाती हो. DevTools कुकी की उन सभी वैल्यू को ऑटोकंप्लीट करता है जो उस पर मिली हैं.
• status-code. सिर्फ़ ऐसे संसाधन दिखाएं जिनका एचटीटीपी स्टेटस कोड, बताए गए कोड से मेल खाता हो. DevTools अपने-आप पूरा होने वाले ड्रॉप-डाउन मेन्यू में, उन सभी स्टेटस कोड को अपने-आप भर देता है जो उन्हें मिले हैं.
• url. वे संसाधन दिखाएं जिनका url दिया गया मान से मेल खाता हो.

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

अनुरोधों को अनुरोध के टाइप के हिसाब से फ़िल्टर करने के लिए, नेटवर्क पैनल पर सभी, फ़ेच/XHR, JS, सीएसएस, Img, Media, फ़ॉन्ट, Doc, WS (WebSocket), Wasm (WebAssembly), मेनिफ़ेस्ट या अन्य (कोई भी अन्य टाइप) बटन पर क्लिक करें.

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

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

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

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

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

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

इन अनुरोधों को छिपाने के लिए, डेटा यूआरएल छिपाएं पर सही का निशान लगाएं.

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

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

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

एक्सटेंशन के अनुरोध छिपाने के लिए, एक्सटेंशन के यूआरएल छिपाएं विकल्प चुनें.

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

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

किसी वजह से, रिस्पॉन्स कुकी के ब्लॉक किए गए अनुरोधों को छोड़कर बाकी सब कुछ फ़िल्टर करने के लिए, ब्लॉक की गई रिस्पॉन्स कुकी देखें. इस डेमो पेज पर इसे आज़माएं.

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

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

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

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

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

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

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

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

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

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

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

कॉलम के मुताबिक क्रम से लगाएं

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

गतिविधि के चरण के हिसाब से क्रम में लगाएं

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

• समय. अनुरोध की शुरुआत से लेकर रिस्पॉन्स में फ़ाइनल बाइट पाने तक, कुल अवधि.

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

कॉलम जोड़ना या हटाना

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

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

कस्टम कॉलम जोड़ें

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

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

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

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

iframes के हिसाब से अनुरोधों को ग्रुप करने के लिए, नेटवर्क पैनल में सेटिंग खोलें और फ़्रेम के हिसाब से ग्रुप करें पर सही का निशान लगाएं.

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

एक-दूसरे से जुड़े अनुरोधों का समय देखना

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

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

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

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

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

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

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

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

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

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

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

फ़ेच एपीआई, 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. समय टैब पर क्लिक करें.

इस डेटा को तेज़ी से ऐक्सेस करने के लिए, समय के ब्रेकडाउन की झलक देखें.

समय टैब में दिखने वाले हर चरण के बारे में ज़्यादा जानकारी के लिए, अलग-अलग समय के ब्रेकडाउन के चरणों के बारे में जानकारी देखें.

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

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

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

समय के ब्रेकडाउन के चरणों के बारे में जानकारी

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

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

इनिशिएटर और डिपेंडेंसी देखें

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

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

कॉन्टेंट लोड होने के इवेंट देखें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आप सभी नेटवर्क अनुरोधों को HAR फ़ाइल में दो तरीकों से सेव कर सकते हैं:

• अनुरोध टेबल में मौजूद किसी भी अनुरोध पर राइट क्लिक करें और Content with HAR के तौर पर सेव करें को चुनें.
• नेटवर्क पैनल के ऊपर दिए गए कार्रवाई बार में, हर एक्सपोर्ट करें पर क्लिक करें.

ध्यान दें: DevTools ऐसे सभी अनुरोधों को एक्सपोर्ट करता है जो आपके DevTools को HAR फ़ाइल में खोलने के बाद मिले हैं. एक्सपोर्ट करने के अनुरोधों को फ़िल्टर नहीं किया जा सकता. किसी एक अनुरोध को सेव करने के लिए, एक या उससे ज़्यादा अनुरोध क्लिपबोर्ड पर कॉपी करें देखें.

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

• HAR फ़ाइल को अनुरोध टेबल में खींचें और छोड़ें.
• नेटवर्क पैनल के ऊपर दिए गए कार्रवाई बार में, हर इंपोर्ट करें पर क्लिक करें.

ध्यान दें: नेटवर्क पैनल, HAR फ़ाइलों से इंपोर्ट किए गए अनुरोधों को शुरू करने वाले लोगों को पढ़ता और दिखाता है.

क्लिपबोर्ड पर एक या उससे ज़्यादा अनुरोध कॉपी करें

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

• यूआरएल कॉपी करें. अनुरोध के यूआरएल को क्लिपबोर्ड पर कॉपी करें.
• cURL के तौर पर कॉपी करें. अनुरोध को cURL कमांड के तौर पर कॉपी करें.
• PowerShell के तौर पर कॉपी करें. अनुरोध को PowerShell कमांड के तौर पर कॉपी करें.
• फ़ेच के तौर पर कॉपी करें. अनुरोध को फ़ेच कॉल के तौर पर कॉपी करें.

• Node.js फ़ेच के तौर पर कॉपी करें. अनुरोध को Node.js फ़ेच कॉल के तौर पर कॉपी करें.

  ---

• जवाब कॉपी करें. जवाब के मुख्य हिस्से को क्लिपबोर्ड पर कॉपी करें.

  ---

• सभी यूआरएल कॉपी करें. सभी अनुरोधों के यूआरएल कॉपी करके, क्लिपबोर्ड पर चिपकाएं.

• सभी को cURL के तौर पर कॉपी करें. सभी अनुरोधों को cURL कमांड की चेन के तौर पर कॉपी करें.

• सभी को PowerShell के तौर पर कॉपी करें. सभी अनुरोधों को PowerShell कमांड की चेन के तौर पर कॉपी करें.

• सभी को फ़ेच के तौर पर कॉपी करें. सभी अनुरोधों को, फ़ेच कॉल की चेन के तौर पर कॉपी करें.

• सभी को Node.js फ़ेच के तौर पर कॉपी करें. सभी अनुरोधों को Node.js फ़ेच कॉल की चेन के तौर पर कॉपी करें.

• सभी को HAR के तौर पर कॉपी करें. सभी अनुरोधों को HAR डेटा के तौर पर कॉपी करें.

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

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

फ़िल्टर पैनल छिपाएं

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

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

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

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

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

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