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

Jecelyn Yeen

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

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

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

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

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

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

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

सुलभता ट्री को बड़ा करके पूरे पेज पर देखना

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

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

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

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

बदलाव टैब

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

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

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

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

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

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

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

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

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

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

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

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

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

बैक/फ़ॉरवर्ड कैश मेमोरी टैब

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

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

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

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

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

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

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

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

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

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

सीएसएस फ़ोर्स्ड-कलर्स मीडिया फ़ीचर

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

कर्सर घुमाने पर रूलर दिखाने का निर्देश

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

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

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

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

फ़्लेक्सबॉक्स एडिटर में row-reverse और column-reverse का इस्तेमाल करना

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

फ़्लेक्सबॉक्स एडिटर

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

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

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

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

एक्सएचआर को फिर से चलाना

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

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

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

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

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

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

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

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

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

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

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

​'फ़ोकस किए जा सकने वाले सभी एलिमेंट में यूनीक `आईडी` होना चाहिए' के लिए Lighthouse ऑडिट. इसमें दो एलिमेंट दिखाए गए हैं, जिनमें दोनों का `आईडी` एक ही है

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

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

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

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

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

अन्य हाइलाइट

इस रिलीज़ में, कुछ ऐसी समस्याएं ठीक की गई हैं जिन पर ध्यान देने की ज़रूरत है:

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

[प्रयोग के लिए उपलब्ध] Reporting API पैनल में एंडपॉइंट

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

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

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

Reporting API पैनल

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

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

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

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

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

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

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