DevTools (Chrome 117) में नया क्या है

नेटवर्क पैनल में किए गए सुधार

वेब कॉन्टेंट को स्थानीय तौर पर और भी तेज़ी से बदलना

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

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

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

ओवरराइड सेट अप हो जाने के बाद, DevTools आपको सोर्स > ओवरराइड > एडिटर पर ले जाता है, ताकि वेब कॉन्टेंट को ओवरराइड किया जा सके.

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

Chromium से जुड़ी समस्याएं: 1465785, 1470532, 1469359.

XHR और फ़ेच अनुरोधों के कॉन्टेंट को बदलना

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

फ़िलहाल, DevTools में कॉन्टेंट ओवरराइड करने की सुविधा इन अनुरोधों के लिए उपलब्ध है: इमेज (उदाहरण के लिए, avif, png), फ़ॉन्ट, फ़ेच और XHR, स्क्रिप्ट (css और js), और दस्तावेज़ (html). DevTools अब उन टाइप के लिए कॉन्टेंट बदलें विकल्प को धूसर कर देता है जिनके लिए यह सुविधा काम नहीं करती.

Chromium से जुड़ी समस्याएं: 792101, 1469776.

Chrome एक्सटेंशन के अनुरोध छिपाएं

आपने Chrome में जो एक्सटेंशन इंस्टॉल किए हैं उनसे भेजे गए काम के अनुरोधों को फ़िल्टर करने और आपके लिखे कोड पर फ़ोकस करने में आपकी मदद करने के लिए, नेटवर्क पैनल में एक नया फ़िल्टर जोड़ा गया है.

chrome-extension:// यूआरएल को भेजे गए सभी अनुरोधों को फ़िल्टर करने के लिए, एक्सटेंशन के यूआरएल छिपाएं को चुनें.

Chromium से जुड़ी समस्याएं: 1257885, 1458803.

ऐसे एचटीटीपी स्टेटस कोड जिन्हें आसानी से समझा जा सकता है

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

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

Chromium से जुड़ी समस्या: 1153956.

JSON के सबटाइप के लिए, जवाबों को बेहतर तरीके से प्रिंट करना

application/[subtype]+json एमआईएमई सबटाइप (उदाहरण के लिए, ld+json, hal+json वगैरह) वाली किसी भी क्वेरी के लिए, जवाब टैब अब जवाब को सही तरीके से पार्स करता है. साथ ही, आपको इसे बेहतर बनाने की सुविधा देता है.

Chromium से जुड़ी समस्या: 406900.

परफ़ॉर्मेंस: नेटवर्क इवेंट के लिए फ़ेच करने की प्राथमिकता में हुए बदलाव देखें

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

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

Chromium से जुड़ी समस्याएं: 1463901, 1380964.

डिफ़ॉल्ट रूप से चालू रहने वाली सोर्स सेटिंग: कोड फ़ोल्डिंग और फ़ाइल अपने-आप दिखने की सुविधा

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

कोड ब्लॉक को छोटा करने के लिए, ब्लॉक की शुरुआत के बगल में मौजूद लाइन नंबर पर कर्सर घुमाएं. इसके बाद, छोटा करें आइकॉन पर क्लिक करें. ब्लॉक को फिर से बड़ा करने के लिए, {...} पर क्लिक करें.

इसके अलावा, सेटिंग > प्राथमिकताएं > फ़ाइलें साइडबार में अपने-आप दिखें सेटिंग भी अब डिफ़ॉल्ट रूप से चालू हो गई है.

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

Chromium से जुड़ी समस्याएं: 1459193, 1336599.

तीसरे पक्ष की कुकी से जुड़ी समस्याओं को डीबग करने की सुविधा को बेहतर बनाया गया है

वेब को निजता के लिहाज़ से ज़्यादा सुरक्षित बनाने के लिए, Chrome ने Privacy Sandbox इनिशिएटिव लॉन्च किया है. यह अन्य ब्राउज़र के अपडेट के साथ-साथ काम करता है. इस पहल से, वेब पर निजता को बेहतर बनाया जा सकता है. साथ ही, विज्ञापन दिखाने वाले वेब को इस तरह से बनाए रखा जा सकता है कि तीसरे पक्ष की कुकी का इस्तेमाल बंद हो जाए. Privacy Sandbox में, धीरे-धीरे बंद होने की टाइमलाइन होती है, ताकि आप बदलावों के हिसाब से आसानी से अडजस्ट कर सकें.

आपके पास यह टेस्ट करने का विकल्प पहले से है कि तीसरे पक्ष की कुकी के फ़ेज़आउट के बाद Chrome कैसे काम करता है. इसके लिए, --test-third-party-cookies-phaseout फ़्लैग के साथ कमांड लाइन से Chrome चलाएं. इस फ़्लैग के बारे में जानने के लिए, कुकी डीबग करना लेख पढ़ें.

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

• आने वाले समय में बंद होने वाली सुविधा के बारे में, बड़े बदलाव की चेतावनी.
• तीसरे पक्ष की कुकी से जुड़ी समस्याएं.

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

इसे आज़माने के लिए, इस डेमो पेज पर कुकी की जांच करें.

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

Chromium से जुड़ी समस्याएं: 1458839, 1462693, 1466310.

ऐप्लिकेशन पैनल में प्रीलोडिंग को डीबग करना

Chrome टीम, उन पेजों को पूरी तरह से पहले से रेंडर करने की सुविधा वापस ला रही है जिन पर उपयोगकर्ता के जाने की संभावना है. इस समस्या को डीबग करने के लिए, DevTools, ऐप्लिकेशन पैनल में प्रीलोडिंग सेक्शन जोड़ता है. नई प्रीफ़ेचिंग और प्रीरेंडरिंग (इन दोनों को मिलाकर "नेविगेशनल प्रीलोडिंग" कहा जाता है) में, लिंक पर आधारित संसाधन के बारे में जानकारी देने वाले निर्देशों के बजाय Speculation Rules API का इस्तेमाल किया जाता है.

इस प्रीरेंडर डेमो पेज पर, ऐप्लिकेशन > प्रीलोडिंग सेक्शन में जाकर, इन चीज़ों की जांच की जा सकती है:

• अनुमान लगाने के नियम, जिसमें मौजूदा पेज पर मिले सभी नियम सेट की सूची होती है.
• प्रीलोड, जिसमें नियम सेट से पहले से फ़ेच किए गए और पहले से रेंडर किए गए सभी यूआरएल की सूची होती है.
• यह पेज, मौजूदा पेज के प्रीरेंडर किए जाने की स्थिति दिखाता है.

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

Chromium से जुड़ी समस्या: 1410709.

नए रंग

आपने शायद पहले ही देख लिया होगा कि DevTools को अब नया लुक दिया गया है. यह Chrome के साथ बेहतर तरीके से काम करता है. इसकी एक वजह नई कलर स्कीम है.

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

Chromium से जुड़ी समस्या: 1456677.

Lighthouse 10.4.0

Lighthouse पैनल अब Lighthouse 10.4.0 पर काम करता है. खास तौर पर, इस वर्शन में इन सुविधाओं के लिए, पहुंच से जुड़ी नई ऑडिट जोड़ी गई हैं:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

उदाहरण के लिए:

बदलावों की पूरी सूची भी देखें. DevTools में Lighthouse पैनल इस्तेमाल करने के बारे में बुनियादी बातें जानने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करना लेख पढ़ें.

Chromium से जुड़ी समस्या: 772558.

DevTools के लिए C/C++ WebAssembly डीबगिंग एक्सटेंशन अब ओपन सोर्स है

DevTools के लिए C/C++ WebAssembly डीबगिंग एक्सटेंशन अब ओपन सोर्स है और DevTools के फ़्रंटएंड रिपॉज़िटरी में मौजूद है. यह एक्सटेंशन, WebAssembly में कंपाइल किए गए C++ प्रोग्राम के लिए, DevTools में डीबग करने की सुविधाएं चालू करता है. ज़्यादा जानकारी के लिए, C/C++ WebAssembly को डीबग करना लेख पढ़ें.

एक्सटेंशन बनाने, चलाने, और उसकी जांच करने का तरीका जानें. साथ ही, योगदान करने के लिए बेझिझक आगे आएं.

Chromium से जुड़ी समस्या: 1410709.

अन्य हाइलाइट

इस रिलीज़ में, कुछ अहम गड़बड़ियां ठीक की गई हैं और सुधार किए गए हैं:

• सीएसएस नेस्टिंग: Elements पैनल अब नेस्ट किए गए बच्चों के लिए पूरी सिलेक्टर चेन (1172985) दिखाता है.
• ऐप्लिकेशन > मेनिफ़ेस्ट में अब विंडो कंट्रोल ओवरले सेक्शन है. यह सेक्शन, मेनिफ़ेस्ट में display_override वैल्यू की मौजूदगी की जांच करता है. साथ ही, इससे जुड़े दस्तावेज़ों के लिंक उपलब्ध कराता है.
• सोर्स > पेज ट्री में अब ये काम किए जा सकते हैं. हालांकि, इनके अलावा और भी काम किए जा सकते हैं (1442863):
  • अगर किसी फ़ोल्डर में मौजूद सभी कॉन्टेंट को अनदेखा करने की सूची में शामिल किया गया है, तो उस फ़ोल्डर को धूसर कर देता है.
  • अगर किसी फ़ोल्डर का पूरा कॉन्टेंट सोर्स मैप से लिया गया है, तो उसे नारंगी रंग में दिखाता है.
• परफ़ॉर्मेंस: रिकॉर्डिंग शुरू करने पर, कैप्चर सेटिंग अब अपने-आप छिप जाती हैं (1455498).
• सोर्स > एडिटर ने Ctrl + ऐरो (Win) और Opt + ऐरो (MacOs) के व्यवहार को पहले जैसा कर दिया है (1468208).
• ऐनिमेशन > सभी रोकें टॉगल अब पेज लोड होने पर भी अपनी स्थिति बनाए रखता है (1446046).
• ऐप्लिकेशन > स्टोरेज > कैश स्टोरेज को ऐप्लिकेशन > स्टोरेज > कैश सेक्शन में ले जाया गया है (1462622).
• यूज़र इंटरफ़ेस (यूआई) के कुछ टेक्स्ट और टूलटिप को बेहतर बनाया गया है: हार्डवेयर कॉन्करेंसी टूलटिप, नेटवर्क फ़िल्टर के टेक्स्ट और मुख्य मेन्यू का विकल्प, ऐप्लिकेशन ट्री व्यू में कैपिटल लेटर का इस्तेमाल, नेटवर्क > हेडर के टेक्स्ट, सोर्स > ओवरराइड और फ़ाइल सिस्टम के टेक्स्ट.

एक्सपेरिमेंट के तौर पर शुरू की गई नई सुविधाएं

रेंडरिंग की नई सुविधा: prefers-reduced-transparency

आपकी वेबसाइट के उपयोगकर्ता, अपने डिवाइसों पर एक्सपेरिमेंट के तौर पर उपलब्ध नई prefers-reduced-transparency सीएसएस मीडिया सुविधा को चालू कर सकते हैं. इससे वे पारदर्शी इफ़ेक्ट को कम करने की अपनी प्राथमिकता के बारे में बता सकते हैं. अपनी वेबसाइट को ज़्यादा लोगों के लिए ऐक्सेस करने लायक बनाने के लिए, इस सेटिंग को ध्यान में रखें. आपकी मदद करने के लिए, रेंडरिंग ड्रॉअर टैब अब prefers-reduced-transparency: reduce सेटिंग की नकल कर सकता है. इससे, आपके पास किसी समाधान का प्रोटोटाइप बनाने और यह जांचने का विकल्प होता है कि इस मामले में आपकी वेबसाइट कैसा काम करती है.

Chrome में इस सुविधा को आज़माने के लिए, chrome://flags में जाकर एक्सपेरिमेंट के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं चालू करें.

Chromium से जुड़ी समस्या: 1424879.

बेहतर प्रोटोकॉल मॉनिटर

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

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

प्रोटोकॉल मॉनिटर ड्रॉअर टैब के सबसे नीचे दाएं कोने में, सीडीपी कमांड एडिटर दिखाएं पर क्लिक करें. इसके बाद, कोई टारगेट चुनें, कमांड टाइप करना शुरू करें, और सुझाए गए विकल्पों में से कोई एक विकल्प चुनें. अगर ज़रूरी हो, तो पैरामीटर की वैल्यू डालें. इसके बाद, कमांड भेजें (Ctrl/Cmd + Enter) पर क्लिक करें.

Chromium से जुड़ी समस्या: 1469345.

झलक दिखाने वाले चैनल डाउनलोड करना

Chrome Canary, Dev या Beta को डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन प्रीव्यू चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, आपको वेब प्लैटफ़ॉर्म के नए एपीआई को आज़माने का मौका मिलता है. इसके अलावा, आपको अपनी साइट पर मौजूद समस्याओं का पता लगाने में मदद मिलती है. इससे पहले कि आपके उपयोगकर्ता उन समस्याओं का पता लगाएं!

Chrome DevTools टीम से संपर्क करना

नई सुविधाओं, अपडेट या DevTools से जुड़ी किसी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.

• हमें सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर जाएं. साथ ही, किसी सुविधा का अनुरोध करने के लिए भी इसी लिंक पर जाएं.
• DevTools में, more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी किसी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणी करें.

DevTools में नया क्या है

DevTools में नया क्या है सीरीज़ में शामिल किए गए सभी विषयों की सूची.