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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एचटीटीपी स्टेटस कोड, जिन्हें कोई भी व्यक्ति आसानी से पढ़ सकता है

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

अनुरोध करने वाली टेबल में, स्टेटस कोड पर कर्सर घुमाकर भी उस टेक्स्ट को देखा जा सकता है.

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

JSON के सब-टाइप के लिए प्रीटी-प्रिंट रिस्पॉन्स

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ऐप्लिकेशन पैनल में, ऐप्लिकेशन को पहले से लोड करने की सुविधा को डीबग करना

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

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

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

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

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

नए रंग

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

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

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

लाइटहाउस 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.

अन्य खास बातें

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

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

एक्सपेरिमेंट के तौर पर उपलब्ध नई सुविधाएं

रेंडरिंग इम्यूलेशन की नई सुविधा: prefers-reduced-transparency

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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