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

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

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

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

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

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

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

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

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 MIME सब-टाइप वाले अनुरोध के जवाब टैब (उदाहरण के लिए, ld+json, hal+json वगैरह) अब जवाब को सही तरीके से पार्स करता है और आपको उसे दिखाने की सुविधा देता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• अगले फ़ेज़आउट के बारे में, नुकसान पहुंचा सकने वाले बदलाव की चेतावनी.
• तीसरे पक्ष की कुकी से जुड़ी समस्याएं.

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

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

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

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

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

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

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

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

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

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

नए रंग

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

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

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

लाइटहाउस 10.4.0

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 में डीबग करने की सुविधाओं को चालू करता है. ज़्यादा जानकारी के लिए, Debug C/C++ WebAssembly देखें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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