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

झलक देखने की सुविधा: पूरे पेज का सुलभता ट्री

नए पूरे पेज पर सुलभता ट्री की मदद से, पूरे पेज पर मौजूद सुलभता ट्री की खास जानकारी आसानी से हासिल की जा सकती है. साथ ही, इससे आपको यह समझने में मदद मिलती है कि सहायक टेक्नोलॉजी के संपर्क में आपका वेब कॉन्टेंट किस तरह दिखता है.

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

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

कोई नोड चुनकर DOM ट्री व्यू पर वापस टॉगल करें. संबंधित DOM नोड अब चुना गया है. यह डीओएम नोड और इसके सुलभता ट्री नोड के बीच मैपिंग को समझने का एक शानदार तरीका है. यह डीओएम ट्री ⬌ सुलभता ट्री व्यू के लिए भी काम करता है!

पहले, सुलभता ट्री सुलभता पैनल में उपलब्ध था. यह व्यू सीमित है. इससे सिर्फ़ एक नोड और उसके ऐन्सेस्टर के बारे में जाना जा सकता है.

हमारी टीम, झलक दिखाने की इस सुविधा पर अब भी काम कर रही है. हमें अपनी रिपोर्ट को और बेहतर बनाने के लिए सुझाव/राय दें या शिकायत करें!

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

बदलाव टैब में ज़्यादा सटीक बदलाव

बदलाव टैब में कोड में किए जाने वाले बदलाव, अपने-आप प्रिटी-प्रिंट होते हैं.

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

Chromium से जुड़ी समस्याएं: 1238818, 1268754 , 1086491

यूज़र फ़्लो रिकॉर्डिंग के लिए, ज़्यादा देर तक टाइम आउट सेट करें

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

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

इसे ठीक करने के लिए, हम टाइम आउट की नई सेटिंग इस्तेमाल कर सकते हैं. उस चरण को बड़ा करें जिसे हम मेन्यू आइटम पर क्लिक करते हैं. टाइम आउट जोड़ें और चरण में बदलाव करें. इसके बाद, इसे 6,000 मिलीसेकंड (6 सेकंड के बराबर) पर सेट करें.

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

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

पक्का करें कि आपके पेजों को बैक-फ़ॉरवर्ड कैश मेमोरी टैब की मदद से कैश मेमोरी में सेव किया जा सकता हो

बैक/फ़ॉरवर्ड कैश मेमोरी (या bfcache) ब्राउज़र को ऑप्टिमाइज़ करने की सुविधा है. इसकी मदद से, झटपट बैक और फ़ॉरवर्ड नेविगेशन की सुविधा चालू हो जाती है.

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

किसी खास पेज की जांच करने के लिए, Chrome में उस पर जाएं. इसके बाद, DevTools में ऐप्लिकेशन > बैक-फ़ॉरवर्ड कैश मेमोरी. इसके बाद, बैक/फ़ॉरवर्ड कैश मेमोरी की जांच करें बटन पर क्लिक करें. इससे DevTools किसी दूसरे पेज पर या वापस जाने की कोशिश करेगा, ताकि यह पता लगाया जा सके कि पेज को बैक-फ़ॉरवर्ड कैश मेमोरी से वापस लाया जा सकता है या नहीं.

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

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

नया प्रॉपर्टी पैनल फ़िल्टर

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

डिफ़ॉल्ट रूप से, जिन प्रॉपर्टी की वैल्यू null या undefined है उन्हें नहीं दिखाया जाता. सभी प्रॉपर्टी देखने के लिए, सभी दिखाएं चेकबॉक्स को चालू करें.

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

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

सीएसएस के लिए फ़ोर्स किए गए रंग की मीडिया सुविधा को एम्युलेट करें

forced-colors सीएसएस मीडिया सुविधा का इस्तेमाल यह पता लगाने के लिए किया जाता है कि उपयोगकर्ता एजेंट ने पेज पर फ़ोर्स किए गए कलर मोड (जैसे कि Windows हाई कंट्रास्ट मोड) को चालू किया है या नहीं. इस मोड में, उपयोगकर्ता के चुने गए सीमित रंग पटल को लागू किया जाता है.

कमांड मेन्यू खोलें, रेंडरिंग दिखाएं कमांड चलाएं. इसके बाद, सीएसएस मीडिया फ़ीचर फ़ोर्स-कलर ड्रॉपडाउन सेट करें.

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

कर्सर घुमाने से जुड़े निर्देश पर रूलर दिखाएं

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

पहले, आप सेटिंग > रूलर दिखाएं चेकबॉक्स.

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

Flexbox एडिटर में row-reverse और column-reverse के साथ काम करना

Flexbox एडिटर ने flex-direction में row-reverse और column-reverse को इस्तेमाल करने के लिए दो नए बटन जोड़े हैं.

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

XHR को फिर से चलाने और खोज के सभी नतीजों को बड़ा करने के लिए, नए कीबोर्ड शॉर्टकट

नेटवर्क पैनल में XHR को फिर से चलाने के लिए कीबोर्ड शॉर्टकट

नेटवर्क पैनल में से कोई XHR अनुरोध चुनें और XHR को फिर से चलाने के लिए कीबोर्ड पर R दबाएं. इससे पहले, सिर्फ़ कॉन्टेक्स्ट मेन्यू (राइट क्लिक > XHR फिर से चलाएं) के ज़रिए XHR को फिर से चलाया जा सकता है

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

खोज के सभी नतीजों को बड़ा करने के लिए कीबोर्ड शॉर्टकट

खोजें टैब में एक नया शॉर्टकट जोड़ा गया है. इससे, खोज के सभी नतीजों को बड़ा और छोटा किया जा सकता है. इससे पहले, खोज के नतीजों को एक बार में सिर्फ़ एक फ़ाइल पर क्लिक करके बड़ा या छोटा किया जा सकता था.

Esc के ज़रिए खोज टैब खोलें > तीन बिंदु वाला मेन्यू > खोजें. खोज स्ट्रिंग (जैसे कि फ़ंक्शन) डालें और खोज के नतीजों की सूची देखने के लिए Enter दबाएं. खोज के नतीजों पर फ़ोकस करें और खोज फ़ाइलों को बड़ा/छोटा करने के लिए, नीचे दिए गए शॉर्टकट का इस्तेमाल करें:

• Windows / Linux - Ctrl + Shift + { या }
• MacOS - Cmd + Options + { या }

Chrome DevTools में कीबोर्ड शॉर्टकट के बारे में जानने के लिए, कीबोर्ड शॉर्टकट पर जाएं.

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

लाइटहाउस पैनल में लाइटहाउस 9

Lighthouse पैनल अब लाइटहाउस 9 पर चल रहा है. अब लाइटहाउस एक ही आईडी शेयर करने वाले सभी एलिमेंट की सूची दिखाएगा.

नॉन-यूनीक एलिमेंट आईडी, सुलभता से जुड़ी एक आम समस्या है. उदाहरण के लिए, aria-labelledby एट्रिब्यूट में दिए गए आईडी का इस्तेमाल एक से ज़्यादा एलिमेंट पर किया जाता है.

अपडेट के बारे में ज़्यादा जानने के लिए, Lighthouse 9.0 में नया क्या है देखें.

​

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

बेहतर सोर्स का पैनल

हमने CodeMirror 6 का इस्तेमाल करने के लिए अपग्रेड किया. इसके बाद, हमने सोर्स पैनल में स्थिरता से जुड़े कई सुधार किए. यहां कुछ अहम सुधार किए गए हैं:

• WASM, JavaScript जैसी बड़ी फ़ाइलों को खोलने पर, यह सुविधा ज़्यादा तेज़ी से काम करती है
• कोड इस्तेमाल करते समय, अब बिना किसी क्रम के स्क्रोल करने की कोई ज़रूरत नहीं है
• बदलाव किए जा सकने वाले सोर्स (जैसे कि स्निपेट, लोकल ओवरराइड) के लिए, अपने-आप पूरे होने वाले बेहतर सुझाव

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

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

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

• नेटवर्क अनुरोधों के वॉटरफ़ॉल डायग्राम को सही तरीके से दिखाना. इससे पहले, यह शैली टूट गई थी. (1275501)
• Sources पैनल में बहुत लंबी लाइनों वाले दस्तावेज़ों में खोज करते समय, कोड हाइलाइट में गड़बड़ी हुई. अब यह ठीक हो गया है. (1275496)
• नेटवर्क अनुरोधों में अब डुप्लीकेट पेलोड टैब नहीं दिखेगा. (1273972)
• परफ़ॉर्मेंस पैनल के खास जानकारी सेक्शन में, लेआउट शिफ़्ट की जानकारी मौजूद न होने की समस्या को ठीक किया गया. (1259606)
• Network Search क्वेरी में, आर्बिट्रेरी वर्ण (जैसे कि ,, .) के साथ काम करना. (1267196)

[प्रयोग के तौर पर] Reporting API पैनल में एंडपॉइंट

प्रयोग के तौर पर उपलब्ध Reporting API पैनल को Chrome 96 में लॉन्च किया गया था. इससे, आपको अपने पेज पर जनरेट होने वाली रिपोर्ट और उनकी स्थिति को मॉनिटर करने में मदद मिलेगी.

एंडपॉइंट सेक्शन अब उपलब्ध है. इसमें आपको Reporting-Endpoints हेडर में कॉन्फ़िगर किए गए सभी एंडपॉइंट की खास जानकारी मिलती है.

सुरक्षा से जुड़े उल्लंघनों, काम नहीं करने वाले एपीआई कॉल वगैरह को मॉनिटर करने के लिए, Reporting API का इस्तेमाल करें.

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

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

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

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

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

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

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

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