Chrome DevTools में किसी वेब पेज की नेटवर्क गतिविधि के बारे में अहम जानकारी देने वाला नेटवर्क पैनल, सबसे ज़्यादा इस्तेमाल किए जाने वाले टूल में से एक है.
इस लेख में, नेटवर्क पैनल में किए जाने वाले सबसे ज़रूरी सुधारों के बारे में बताया गया है. आयोना फ़ोर्फ़ोटा और सिल्विया एरेमिया ने ये सुधार अपनी STEP इंटर्नशिप के दौरान किए हैं. इन सुधारों का बेसब्री से इंतज़ार किया जा रहा था. इन्हें Chromium के समस्या को ट्रैक करने वाले टूल पर उपलब्ध बैकलॉग से चुना गया है. इससे पैनल को ज़्यादा आसानी से, इस्तेमाल करने लायक, और जानकारी देने वाला बनाया जा सकेगा.
इन नई सुविधाओं की मदद से, नेटवर्क पैनल की मदद से वेब डेवलपर ये काम कर सकते हैं:
- सिर्फ़ काम के नेटवर्क अनुरोधों पर फ़ोकस करें.
- बाहरी रेफ़रंस की ज़रूरत के बिना एचटीटीपी स्टेटस कोड को समझें.
- अनुरोध की गड़बड़ियों का तेज़ी से पता लगाएं और उन्हें ठीक करें.
- JSON सब-टाइप के रिस्पॉन्स को समझना.
पूरी जानकारी के लिए आगे पढ़ें!
Chrome एक्सटेंशन के अनुरोध फ़िल्टर करें
Chrome एक्सटेंशन अपने खुद के नेटवर्क अनुरोध कर सकते हैं, जो नेटवर्क पैनल में पेज के अनुरोधों के साथ दिखाई देते हैं. अगर आपने अभी तक किसी एक्सटेंशन को डेवलप नहीं किया है, तो हो सकता है कि ये अनुरोध आपके काम के न हों. इससे पहले, इन्हें छिपाने का सिर्फ़ एक तरीका था: -scheme:chrome-extension फ़िल्टर का इस्तेमाल करना या गुप्त मोड में डीबग करना.
Chrome 117 से यह आसान हो गया है. नेटवर्क पैनल को व्यवस्थित रखने के लिए, DevTools अब एक चेकबॉक्स उपलब्ध है. इसकी मदद से, Chrome एक्सटेंशन के अनुरोधों को बाहर रखा जा सकता है.
इस सुविधा की डिफ़ॉल्ट स्थिति को लेकर बातचीत जारी है. शुरुआत में, हमने इसे डिफ़ॉल्ट रूप से चालू करने के बारे में सोचा था. हमारा मानना था कि इससे ज़्यादातर उपयोगकर्ताओं को बेहतर अनुभव मिल सकेगा. हालांकि, इस तरीके से कुछ उपयोगकर्ताओं को यह जानकारी नहीं रह सकती है कि Chrome एक्सटेंशन के यूआरएल, अनुरोधों को ट्रिगर कर सकते हैं. इससे एक्सटेंशन डेवलपर को भी चुनौतियों का सामना करना पड़ सकता है. इसलिए, डिफ़ॉल्ट स्थिति 'बंद है' पर सेट है.
इस चेकबॉक्स के चालू होने पर, आपकी अनुरोध सूची साफ़-सुथरी और कम ध्यान भटकाने वाली होगी. साथ ही, यह उन अनुरोधों पर ज़्यादा फ़ोकस करेगी जो आपके लिए सबसे ज़्यादा मायने रखते हैं. इससे आपको डीबग करने का ज़्यादा बेहतर अनुभव मिलेगा!
एचटीटीपी रिस्पॉन्स स्टेटस टेक्स्ट
असरदार तरीके से डीबग करने के लिए, एचटीटीपी स्टेटस कोड को समझना ज़रूरी है. हालांकि, लगातार उनके मतलब ढूंढने में परेशानी हो सकती है. DevTools में कई मददगार सुविधाएं शामिल हैं: जब अनुरोध की सूची में मौजूद स्टेटस कोड के ऊपर पॉइंटर को दबाकर रखा जाता है, तो टूलटिप तुरंत अपना स्टेटस टेक्स्ट उपलब्ध कराता है. इसका टाइटल, ब्यौरे को साफ़ तौर पर बताता है.
स्टेटस टेक्स्ट, कोड के ठीक बगल में हेडर व्यू में भी दिखता है. पहले सिर्फ़ एचटीटीपी/1.1 के लिए उपलब्ध थी, लेकिन अब इन सुविधाओं को एचटीटीपी/2 और एचटीटीपी/3 पर लागू कर दिया गया है. दिखने वाले इन छोटे बदलावों का बड़ा असर होता है. इससे आपका समय बचता है और कोड का मतलब खोजने के बजाय, डीबग करने पर फ़ोकस किया जा सकता है.
गड़बड़ी दिखाने की बेहतर सुविधा
हमने पैनल में ज़्यादा जानकारी दिए बिना गड़बड़ियों का तुरंत पता लगाना और उन्हें ठीक करना आसान बनाया है. इसके लिए, हमने गड़बड़ी के मैसेज को टेक्स्ट के रंग में बदलाव करके सिर्फ़ हाइलाइट नहीं किया. इसके लिए, हमने जानकारी देने वाले आइकॉन जोड़े. इनकी मदद से, गड़बड़ियों का अनुरोध करने पर ध्यान दिया जा सकता है. इन गड़बड़ियों का स्टेटस कोड 404 होता है. छोटे और मददगार इंडिकेटर से गड़बड़ियों पर ज़्यादा ध्यान दिया जाएगा, जिससे यह पक्का होगा कि ज़रूरी समस्याओं को नज़रअंदाज़ न किया जाए.
प्रिटी-प्रिंटिंग JSON सब-टाइप
वेब डेवलपमेंट में अक्सर JSON के जवाबों की जांच की जाती है, लेकिन फ़ॉर्मैट नहीं किए गए JSON को पढ़ने में बहुत मुश्किल होती है. ऐसे जवाबों से परेशानी हो सकती है. खास तौर पर, ld+json, hal+json या sparql-results+json जैसे सब-टाइप वाले जवाबों से आपको परेशानी हो सकती है. उदाहरण के लिए, जब ये एक ही लाइन में दिखते हैं. DevTools ने JSON के सब-टाइप के लिए, उपयोगकर्ता के लिए आसान और छोटा किया जा सकने वाला प्रज़ेंटेशन पेश किया है, ताकि चीज़ों को आसान बनाया जा सके. अब इन जवाबों को फ़ॉर्मैट कर दिया गया है. इससे डेवलपर को बाहरी टूल पर भरोसा करने की ज़रूरत नहीं होगी. इस नए डिज़ाइन में, फ़ोटो को पढ़ना और समझना आसान है.
कम्यूनिटी से अच्छा फ़ीडबैक
भले ही, इन सुविधाओं को इस्तेमाल करने की शुरुआत हुई है, लेकिन कम्यूनिटी से मिलने वाले सुझावों की वजह से इसे काफ़ी अच्छा माना जा रहा है. उनकी सफलता ने कई उपयोगकर्ताओं को इन सुधारों से खुश किया है. इससे उनका अनुभव भी बेहतर हुआ है. X पर इनमें से कुछ जवाब पढ़े जा सकते हैं:
"अरे, यह शानदार है! ChromeDevTool ने हाल ही में, लोगों के पढ़ने लायक एचटीटीपी स्टेटस कोड दिखाकर अपने गेम को और आगे बढ़ाया है. इससे यह देखना आसान हो जाता है कि नेटवर्क अनुरोध में क्या गड़बड़ी हुई."—X पर TribalIdeas
"हाल ही में, यह बहुत मददगार साबित हुआ है. खास तौर पर, विज्ञापन रोकने वाले एक्सटेंशन और ग्रामर एक्सटेंशन वाले फ़ॉर्म से जुड़ी समस्या से निपटना."-X पर MrAhmadAwais
क्या आप इन नई सुविधाओं का इस्तेमाल करने के लिए तैयार हैं? Chrome DevTools पर जाएं और अपने लिए बेहतर नेटवर्क पैनल का अनुभव लें. डीबग करते रहें!
झलक दिखाने वाले चैनलों को डाउनलोड करें
अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome के कैनरी, डेव या बीटा वर्शन का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई टेस्ट करने और उपयोगकर्ताओं के ऐसा करने से पहले ही, अपनी साइट पर समस्याओं का पता लगाने में मदद मिलती है!
Chrome DevTools टीम से संपर्क करना
पोस्ट में मौजूद नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में बताने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
- DevTools में ज़्यादा विकल्प
> सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें पर जाकर, DevTools से जुड़ी समस्या की शिकायत करें. - @ChromeDevTool पर ट्वीट करें.
- DevTools YouTube वीडियो या DevTools सलाह वाले YouTube वीडियो में नया क्या है, इस बारे में टिप्पणियां करें.